JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<label>Category</label>
<select name="category_1">
<option>CPU</option>
<option>HDD</option>
</select>
<select name="items_1">
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
</li>
</ul>
<label></label>
<input type="hidden" name="current_added_products" value="2" />
<input type="button" class="add_more_product" value ="Add More Product" />
JavaScript
$('.add_more_product').click(function() {
var $ul = $('ul:last');
$ul.clone().find('select').attr('name', function(i, cur) {
return cur.match(/\D+/g).join('') + (Number(cur.match(/\d+/g).join('')) + 1)
}).end().insertAfter($ul)
})