Два модальных окна на одной странице

html { 
  color: #333; 
  background-color: #16a085; 
} 
 
label { 
  cursor: pointer; 
  transition: all 250ms; 
} 
 
.container { 
  position: relative; 
  margin: 0 auto; 
  padding: 50px; 
} 
.container h1 { 
  font-weight: 100; 
  color: white; 
  text-align: center; 
} 
.container .modal-button { 
  position: relative; 
  display: block; 
  margin: 100px auto; 
  padding: 20px 25px 34px; 
  width: 50px; 
  font-size: 36px; 
  font-weight: 300; 
  color: #2980b9; 
  text-align: center; 
  line-height: 0.3; 
  background-color: white; 
  border-radius: 50%; 
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2); 
  transition: all 250ms; 
} 
.container .modal-button span { 
  font-size: 12px; 
} 
.container .modal-button:hover, .container .modal-button:focus { 
  color: #16a085; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 
} 
.container .modal-content, 
.container .modal-background { 
  visibility: hidden; 
  width: 0; 
  height: 0; 
  opacity: 0; 
  overflow: hidden; 
  cursor: pointer; 
} 
.container .modal-background { 
  transition: height 250ms; 
} 
.container .modal-content { 
  transform: scale(0); 
  transition: transform 500ms; 
} 
.container #modal { 
  display: none; 
} 
.container #modal:checked ~ .modal-background { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.8); 
  visibility: visible; 
  opacity: 1; 
  transition: height 250ms; 
} 
.container #modal:checked ~ .modal-content { 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  margin-top: -25%; 
  margin-left: -25%; 
  width: 50vw; 
  height: auto; 
  padding: 40px; 
  background-color: white; 
  border-radius: 3px; 
  visibility: visible; 
  opacity: 1; 
  pointer-events: auto; 
  cursor: auto; 
  transform: scale(1); 
  transition: transform 500ms; 
} 
.container #modal:checked ~ .modal-content .modal-close { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  font-size: 22px; 
  color: rgba(51, 51, 51, 0.4); 
  transition: color 200ms, transform 500ms; 
} 
.container #modal:checked ~ .modal-content .modal-close:hover, .container #modal:checked ~ .modal-content .modal-close:focus { 
  color: #333; 
  transform: rotate(360deg); 
} 
.container #modal:checked ~ .modal-content p { 
  position: relative; 
  margin: 0 0 20px 0; 
  font-weight: 200; 
  font-size: 14px; 
  line-height: 1.6; 
} 
.container #modal:checked ~ .modal-content .modal-content-button { 
  position: relative; 
  float: right; 
  margin: 0; 
  padding: 10px 20px; 
  color: white; 
  font-weight: 100; 
  border-radius: 3px; 
  background-color: #2980b9; 
} 
.container #modal:checked ~ .modal-content .modal-content-button:hover, .container #modal:checked ~ .modal-content .modal-content-button:focus { 
  background-color: #409ad5; 
} 
 
 
label { 
  cursor: pointer; 
  transition: all 250ms; 
} 
 
.container1 { 
  position: relative; 
  margin: 0 auto; 
  padding: 50px; 
} 
.container1 h1 { 
  font-weight: 100; 
  color: white; 
  text-align: center; 
} 
.container1 .modal-button1 { 
  position: relative; 
  display: block; 
  margin: 100px auto; 
  padding: 20px 25px 34px; 
  width: 50px; 
  font-size: 36px; 
  font-weight: 300; 
  color: #2980b9; 
  text-align: center; 
  line-height: 0.3; 
  background-color: white; 
  border-radius: 50%; 
  box-shadow: 0 0 45px rgba(0, 0, 0, 0.2); 
  transition: all 250ms; 
} 
.container1 .modal-button1 span { 
  font-size: 12px; 
} 
.container1 .modal-button1:hover, .container .modal-button1:focus { 
  color: #16a085; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); 
} 
.container1 .modal-content1, 
.container1 .modal-background1 { 
  visibility: hidden; 
  width: 0; 
  height: 0; 
  opacity: 0; 
  overflow: hidden; 
  cursor: pointer; 
} 
.container1 .modal-background1 { 
  transition: height 250ms; 
} 
.container1 .modal-content1 { 
  transform: scale(0); 
  transition: transform 500ms; 
} 
.container1 #modal1 { 
  display: none; 
} 
.container1 #modal1:checked ~ .modal-background1 { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0, 0, 0, 0.8); 
  visibility: visible; 
  opacity: 1; 
  transition: height 250ms; 
} 
.container1 #modal1:checked ~ .modal-content1 { 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  margin-top: -25%; 
  margin-left: -25%; 
  width: 50vw; 
  height: auto; 
  padding: 40px; 
  background-color: white; 
  border-radius: 3px; 
  visibility: visible; 
  opacity: 1; 
  pointer-events: auto; 
  cursor: auto; 
  transform: scale(1); 
  transition: transform 500ms; 
} 
.container1 #modal1:checked ~ .modal-content1 .modal-close1 { 
  position: absolute; 
  top: 20px; 
  right: 20px; 
  font-size: 22px; 
  color: rgba(51, 51, 51, 0.4); 
  transition: color 200ms, transform 500ms; 
} 
.container1 #modal1:checked ~ .modal-content1 .modal-close1:hover, .container1 #modal1:checked ~ .modal-content1 .modal-close1:focus { 
  color: #333; 
  transform: rotate(360deg); 
} 
.container1 #modal1:checked ~ .modal-content1 p { 
  position: relative; 
  margin: 0 0 20px 0; 
  font-weight: 200; 
  font-size: 14px; 
  line-height: 1.6; 
} 
.container1 #modal1:checked ~ .modal-content1 .modal-content-button1 { 
  position: relative; 
  float: right; 
  margin: 0; 
  padding: 10px 20px; 
  color: white; 
  font-weight: 100; 
  border-radius: 3px; 
  background-color: #2980b9; 
} 
.container #modal1:checked ~ .modal-content1 .modal-content-button1:hover, .container1 #modal1:checked ~ .modal-content1 .modal-content-button1:focus { 
  background-color: #409ad5; 
}

<div class="container"> 
	 
	<h1>CSS Only Modal with Animation</h1>  
	 
	<input id="modal" type="checkbox"> 
	<label class="modal-button" for="modal"> 
		<i class="fa fa-fire" aria-hidden="true"></i> 
		<span>Fire Me!</span> 
	</label> 
	<label class="modal-background" for="modal"></label> 
 
	<div class="modal-content"> 
		<label class="modal-close" for="modal">&#10005;</label> 
		<h2>Sweet Modal</h2> 
		<p>111111111111111</p> 
		<label class="modal-content-button" for="modal">OK</label> 
	</div> <!-- .modal-content --> 
</div> <!-- .modal-container --> 
 
<div class="container1"> 
	 
	<h1>CSS Only Modal with Animation</h1>  
	 
	<input id="modal1" type="checkbox"> 
	<label class="modal-button1" for="modal1"> 
		<i class="fa fa-fire" aria-hidden="true"></i> 
		<span>Fire Me!</span> 
	</label> 
	<label class="modal-background1" for="modal1"></label> 
 
	<div class="modal-content1"> 
		<label class="modal-close1" for="modal1">&#10005;</label> 
		<h2>Sweet Modal</h2> 
		<p>22222222</p> 
		<label class="modal-content-button1" for="modal1">OK</label> 
	</div> <!-- .modal-content --> 
</div> <!-- .modal-container -->

.modal-content { 
  display: none; 
  border: 1px solid #000; 
  padding: 2em; 
} 
.modal-controller { 
  display: none; 
} 
.modal-controller:checked ~ .modal-content { 
  display: block; 
}

<div> 
  <input class="modal-controller" id="modal1" type="checkbox"> 
  <div class="modal-content"> 
    Первое окно 
    <label for="modal1">[закрыть]</label> 
  </div> 
</div> 
<div> 
  <input class="modal-controller" id="modal2" type="checkbox"> 
  <div class="modal-content"> 
    Второе окно 
    <label for="modal2">[закрыть]</label> 
  </div> 
</div> 
 
<ul> 
  <li><label for="modal1">Для первого</label></li> 
  <li><label for="modal2">Для второго</label></li> 
</ul>