JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="main" style="list-style-type:none;">
<li class="append_list">
  <label>Product 1</label> <input type="text">
  <br>
   <label>Product 2</label> <input type="text">
  <br>
   <label>Product 3</label> <input type="text">
  <br>
   <label>Product 4</label> <input type="text">
  <br>

</li>
</ul>
<button id="add" style="clear:both">ADD NEW PRODUCTS</button>-

CSS

.append_list {
 margin-top:10px;   
    
}

JavaScript

$(document).ready(function(){
$("#add").click(function () 
{       
    $('.main > :first-child').clone().appendTo('.main').find('input[type=text]').val('');
    $('.main').append("<button class='rmv_btn' style='clear:both'> Remove </button>");

});                 
$('.main').on("click",".rmv_btn",function () 
{   $(this).prev('li').remove();
     $(this).remove();
});
});