JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">Alert from System</h4>
			 </div>
			<div class="modal-body">
			   <form onsubmit="return false">
				  <ul>
					<li><p class="info1">Hello world!</p></li>
          <li><p class="info2">Hello funny world!</p></li>
				  </ul>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary" id="modalBtnAttClose">Save and close</button>
			 </div>
		</div>
		</div>
	</div>
  
  <button type="button" class="btn btn-primary" id="showModal">click nonstop</button>

CSS

#showModal {
  margin-top:250px;
}

JavaScript

$(document).on('click', '#showModal',function() {
  myModalBackup = $('#myModal').clone();
  myModalBackup.find('.modal-backdrop').remove();
  $('#myModal').modal('hide').remove();
  myModalBackup.find('.info1').html('customize your element <b>1</b>...');
  myModalBackup.find('.info2').html('customize your element <b>2</b>...');			
  myModalBackup.modal('show');
});

myModalBackup = null;
$('#myModal').on('hidden.bs.modal', function(){
	$('body').append(myModalBackup.clone());
		myModalBackup = null;
});