JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="openloginpopup">
    <div class="modal-content">
	    open
	  </div>
</div>
<div id="myModal" class="modal">
    <div class="modal-content modal1">
	    <span class="close">&times;</span>
	      <div class="popup-form">
	       modal1   
	      </div>
	  </div>
</div>
<div id="myModal2" class="modal">
    <div class="modal-content modal1">
	    <span class="close">&times;</span>
	      <div class="popup-form">
	       modal2   
	      </div>
	  </div>
</div>

CSS

#openloginpopup {
    float: right;
}
.modal-backdrop{
  display:none;
}
.modal{
  width:50px;
}

JavaScript

$("#openloginpopup").on('click', function(){
	if(!$('#myModal').is(':visible') && !$('#myModal2').is(':visible')){
 		 $('#myModal').modal('show'); 
  }else{
  		if($('#myModal').is(':visible')){
      	$('#myModal2').modal('show'); 
        $('#myModal').modal('hide'); 
      }else{
      	$('#myModal2').modal('hide');
        $('#myModal').modal('show');
      }
  }
});

$(".modal").on('click', function(){
	$(this).modal('hide');
});