JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="prod-row-wrap">
<div class="prod-new-row">
<div class="prod-name">
<select class="form-control" name="prod_name[]">
<option value="x">Platinum subscription</option>
</select>
</div>
<div class="prod-quan">
<input type="text" name="quantity" class="form-control" />
</div>
<div class="prod-price">
<input type="text" name="price" class="form-control" />
</div>
<div class="prod-tax">
<input type="text" name="tax" class="form-control" />
</div>
<div class="prod-total">
<p>£ <span class="total">0</span></p>
</div>
<div class="prod-delete">
<a href="#" class="remove_field">Remove</a>
</div>
</div>
<button class="btn btn-lg add_product_button">Add product</button>
</div>
JavaScript
$('[name="tax"]').on('input', function() {
var quantity = $('[name="quantity"]').val();
var price = $('[name="price"]').val();
var tax = $('[name="tax"]').val();
var subtotal = quantity * price;
var tax_total = (subtotal / 100) * tax;
var total = subtotal + tax_total;
$('.total').text(total);
});
var prod_wrapper = $('.prod-row-wrap');
var prod_add_button = $(".add_product_button");
$(prod_add_button).click(function(e){
e.preventDefault();
$('<div class="prod-new-row"><div class="prod-name"><select class="form-control" name="prod_name[]"><option value="x">Platinum subscription</option></select></div><div class="prod-quan"><input type="text" name="quantity[]" class="form-control" /></div><div class="prod-price"><input type="text" name="name[]" class="form-control" /></div><div class="prod-tax"><input type="text" name="name[]" class="form-control" /></div><div class="prod-total"><p>£0</p></div><div class="prod-delete"><a href="#" class="remove_field">Remove</a></div></div>').insertBefore(prod_add_button);
});
$(prod_wrapper).on("click",".remove_field", function(e){
e.preventDefault();
$(this).closest('div.prod-new-row').remove();
});