JSFiddle - React, Tailwind, and code Playground

by swaroop206

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="elements">
<button id="btn">Add</button>
	<div id="Outer_00" class="boxbg">
	<input type="text" name="" placeholder="text">
	<select id="Field1_00"><option>element1</option><option>Next level</option></select>
		
		
	</div>
</div>

CSS

#elements{width:40%;float:left;margin-left:10px;margin-right:20px;}
.boxbg{background:#999;margin-bottom:15px;padding:10px;}
#btn{margin-bottom:10px;}
#secondelement{width:20%;float:left;}
input[type="text"], select{width:95%;margin-bottom:10px;padding:6px;}

JavaScript

$( document ).ready(function() {
        
        var current_id = 0;
	    $('#btn').click(function(){
            if(current_id < 4)
	            nextElement($('#Outer_00'));
	    })
	    
	    function nextElement(element){
	        var newElement = element.clone();
	        var id = current_id+1;
	        current_id = id;
	        if(id <10)id = "0"+id;
	        newElement.attr("id",element.attr("id").split("_")[0]+"_"+id);
	        var field = $('select', newElement).attr("id");
	        $('select', newElement).attr("id", field.split("_")[0]+"_"+id );
	        newElement.appendTo($("#elements"));
	    }
        
    });