<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Kotak</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="">
</head>
<body>
	<div class="container" style="border-width: 2px;border-color: black;border-style: groove;">

	
	<button type="" class="btn btn-default" id="kotak">TAMBAH</button>

	<div id="kotakbesar">
	<div id="kotakkecil_1">
	<div class="col-sm-6 col-md-3">
	    <div class="thumbnail" style="width: 500px;margin-left: 262px;">
	      
	      <div class="caption">
	        
	        <p>kotak kecil</p>
	        <p style="text-align: right;"> <a href="#" class="btn btn-default" role="button" id="delete" style="margin-top: 100px;text-align: right;">Hapus</a></p>
	      </div>
	    </div>
	 
	</div>
	<div class="row">
</div>

	
	</div>
	</div>	
</body>

<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.map" type="text/javascript" charset="utf-8"></script>	
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</footer>
</html>
#kotakbesar{
border-width: 2px;
border-color: black;
border-style: groove;
padding-bottom: 1000px;
margin-top: 25px;
}
.kotak {
    display: block;
    margin-bottom: 13px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid black;
    border-radius: 1px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    padding-top: 41px;
    padding-bottom: 41px;
    margin-top: 20px;
}
.tengah{
	text-align: center;
}
.navbar {
  
    margin-bottom: 0px;
  
    border-bottom-width: 2px;
    border-bottom-color: black;
    border-bottom-style: outset;
}
.dropbtn {
    background-color: #F8F8F8;
    color: #777;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-bottom: 10px;
    line-height: 20px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    color: black;
}

.navbar-right {
    margin-right: 40px;
}
var InputsWrapper   = $("#kotakbesar");
var x = InputsWrapper.length; 
var FieldCount=1; 
//}
$(document).on('click','#kotak', function(e){
FieldCount++; 
$(InputsWrapper).append('<div class="col-sm-6 col-md-3" id="kotak1_'+ FieldCount +'"><div class="thumbnail" style="width: 500px;margin-left: 262px;"><div class="caption"><p>kotak kecil</p><p style="text-align: right;"> <button type="" class="btn btn-default" id="delete" style="margin-top: 100px;text-align: right;">hapus</button></p></div></div></div><div class="row"></div>');
x++;
return false;
});

$(document).on("click","#delete", function(e){ 
   if( x > 1 ) {
     $(this).closest('#kotak1_'+ FieldCount +'').remove(); 
     x--; 
   }
  return false;
});
Rerun