JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://slm.g6.cz/assets/css/bootstrap.min.css">
<body class="modal-header">
<div id="b1" class="btn btn-primary" >b1</div>
<div id="b2" class="btn btn-primary ">b2</div>
<div id="b3" class="btn btn-primary ">b3</div>
<div id="b4" class="btn btn-primary ">b4</div>



<form class="form-inline">
<div id="d1" title="Add New Items" style="display: none">
    <div class="control-group">
            	<label class="control-label">User ID :</label>
            <div class="controls">
            	<input type="text" name="userid" placeholder="User ID" id="id"/>
            </div>
        </div>
        <div class="control-group">
            	<label class="control-label">User Name :</label>
            <div class="controls">
            	<input type="text" name="username" placeholder="User Name" id="name"/>
            </div>
        </div>
        <div class="control-group">
            	<label class="control-label">User Age :</label>
            <div class="controls">
            	<input type="text" name="userage" placeholder="User Age" id="age"/>
            </div>
        </div>
</div>

<div id="d2" title="Checking Empty..." style="display:none;">
	<p>Please do not empty....!</p>
</div>
</form>
</body>

JavaScript

$(function () {
// Dialog Open	 
$("#d1").dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: true,
	closeOnEscape:true, 
	resizable:false, 
	show:'fade',
    buttons: { 
      "Add": function() { 
	  	
		var id = $("#id").val(),
		name = $('#name').val(),
		age = $('#age').val();
		if(id=='' || name=='' || age=='')
			{
				//alert("Please do not empty....!",title="Hello");
				$("#d2").dialog("open");
				$("#d2").dialog({
					buttons:{
						"OK":function(){
								$(this).dialog("close");
								$("#id:first").focus();	
							}
						}
					}); 
				exit;
			}//End if statement
			
		$.post('process.php',{
			user_id: id, user_name: name, user_age: age, action:'joined'
		});//End Post
		$("#id").val('');
		$("#name").val('');
		$("#age").val('');				
		$(this).dialog("close");		
		},
      "Cancel": function() { 
	  	$("#id").val('');
		$("#name").val('');
		$("#age").val('');
	  	$(this).dialog("close"); 
		} 
    }
});


$("#d2").dialog({
    autoOpen: false,
    height: 'auto',
    width: 'auto',
    modal: true,
	closeOnEscape:true, 
	resizable:false, 
	show:'fade',
    buttons: { 
      "Ok": function() { $(this).dialog("close"); } 
    }
});

$(".btn").click(function(){ 
   
    $('#id').val( $(this).attr('id'));
  
    $("#d1").dialog("open");});


});