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="zdghfh"><option>element1</option><option class="play_audio">Next level</option></select>
</div>
</div>
<div class="secdiv_loop" style="background:red;padding:10px;">
</div>

CSS

#try{background:#000;padding: 10px;margin-bottom:10px;}
.addsecloop{color:#fff;}
input[type="text"], select{padding:5px;margin-right:3px;}
.boxbg{margin-bottom:5px;}

JavaScript

$( document ).ready(function() {

        var current_id = 0;
        $('#btn').click(function(){
           if(current_id < 10)
                nextElement($('#Outer_00'));
 })
   function nextElement(element){
            var newElement = element.clone();
            var id = current_id+1;
            current_id = id;
          
            newElement.attr("id",element.attr("id") +"_"+id);
            var field = $('select', newElement).attr("id");
            $('select', newElement).attr("id", field +"_"+id );
			 
			 newElement.appendTo($("#elements"));
		
		firstloop();
			
			function secondloop(element) {
			
			var $addsecloop = $('.addsecloop');
			
		 $('.secdiv_loop').append('<div id="try" class="boxbg"><input type="text" name="" placeholder="text"><select id="zdghfh"><option>element1</option><option class="plays_audio">Next level</option></select><span class="addsecloop" id="btaddsec' + ($addsecloop.length + 1) + '">add</span></div>');

			}
			
			function firstloop() {
      
      newElement.find('select').change(function(){
			$(this).find("option:selected").each(function(){
            if($(this).attr("class")=="play_audio"){
		
		secondloop();
}
});
			
			
      	});
			
			}
 }

  $('select#zdghfh').change(function(){
			$(this).find("option:selected").each(function(){
            if($(this).attr("class")=="play_audio"){
		var $addsecloop = $('.addsecloop');
			
		 $('.secdiv_loop').append('<div id="try" class="boxbg"><input type="text" name="" placeholder="text"><select id="zdghfh"><option>element1</option><option class="plays_audio">Next level</option></select><span class="addsecloop" id="btaddsec' + ($addsecloop.length + 1) + '">add</span></div>');


}
});
			
			
      	});


    });