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 style="clear:both" onclick="add_products()">ADD NEW PRODUCTS</button>-

JavaScript

function remove_products(element) {
    $(element).prev().remove();
    $(element).remove();
}

function add_products() {
    $('.main').append($('.main > :first-child').clone());
    $('.main').append('<button style="clear:both" onclick="remove_products(this)"> Remove </button>');
}