JSFiddle - React, Tailwind, and code Playground

by Tintu Raju

HTML

<div id='outer'>

    <div id='template' class='block' style='border:solid 1px red;margin-bottom:20px;'>
         <div id='file' class='file' style='margin:20px;width:80%;border:solid 1px green;padding:10px;margin-bottom:15px;'>
             File upload          
         </div>

         <button class='addMoreFile'>
            Add more File
         </button>
    </div>
</div>
      <button id='addMore'>
        Add more Item
      </button>

JavaScript

var section_count = 1;
var file_count = 1;
$("#template").hide();

$('#addMore').click(function(){
  section_count++;
  var $div = $('#template');
  var $item = $div.clone().prop('id', 'section_'+section_count );
  $("#outer").append( $item );
  $item.show();
});

$("#addMore").trigger("click");

$(document).on('click','.addMoreFile',function(){
  file_count++;
   var $div = $('#file');
   var $item = $div.clone().prop('id', 'file_'+file_count );
   $(this).parent(".block").find(".addMoreFile").before($item);
})