JSFiddle - React, Tailwind, and code Playground

by Bipen Chhetri

HTML

<div id="displayblock">
<div id="mainDiv">
  <p>
      <label>Name:</label>
       <input type="text" name="topping"  maxlength="50" class="validate[required]" value="test"/>
      <span><strong>Price</strong></span>
       <input style="width:80px;" type="text" name="price"  maxlength="50" class="validate[required]" value="test"/>
  </p>
</div>
</div>
 <p>
     <a id="add_more" class="more_button fl" style="cursor:pointer"> Add More + </a>
 </p>

CSS

.close{
  cursor:pointer;
 }

JavaScript

var clickedcount = 1; 
$(".more_button").click(function(){
     
  $("#mainDiv").clone().attr('id','mainDiv'+clickedcount).appendTo('#displayblock').hide();
  
  var newSpan = $('<span>',{
                     class:"close",
                     text:"Remove"
                     
                 });
  newSpan.appendTo($('#mainDiv'+clickedcount).find('p'));
  $('#mainDiv'+clickedcount).slideDown('slow');
       clickedcount++;
});

$('#displayblock').on('click','.close',function(){
  $(this).parent().slideUp('slow',function(){
        $(this).parent().remove();
   });
});