JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!DOCTYPE html>
<html>
<body>
<div class="col-12">
<form class="create_invoice_form" method="post">
  <div class="row">
	<div class="col-12 col-md-6">
	  <label for="">Emailadres</label>
	  <div class="inputstyle mb-10">
		<input type="text" name="invoice_mail">
	  </div>
	</div>
	<div class="col-12 col-md-6">
	  <label for="">Datum</label>
	  <div class="inputstyle mb-10">
		<input type="date" name="invoice_date">
	  </div>
	</div>
	<div class="col-12">
	  <div class="invoicerow">
		<div class="row">
		  <div class="col-12 col-md-2">
			<label for="">Aantal</label>
			<div class="inputstyle mb-10">
			  <input type="text" name="invoice_row[][invoice_quantity]">
			</div>
		  </div>
		  <div class="col-12 col-md-5">
			<label for="">Titel</label>
			<div class="inputstyle mb-10">
			  <input type="text" name="invoice_row[][invoice_title]">
			</div>
		  </div>
		  <div class="col-12 col-md-2">
			<label for="">Prijs ex. BTW</label>
			<div class="inputstyle mb-10">
			  <input type="text" name="invoice_row[][invoice_price]">
			</div>
		  </div>
		  <div class="col-12 col-md-2">
			<label for="">Totaal</label>
			<div>€99,05</div>
		  </div>
		  <div class="col-12 col-md-1 d-flex align-center">
			<i class="fas fa-trash-alt delete_invoice_row"></i>
		  </div>
		  <div class="col-12">
			<label for="">Beschrijving</label>
			<div class="inputstyle mb-10">
			  <textarea type="text" name="invoice_row[][invoice_desc]"></textarea>
			</div>
		  </div>
		</div>
	  </div>
	  <div class="new_invoice_row">

	  </div>
	</div>
  </div>
</form>
</div>
<div class="col-12">
<i class="fas fa-plus-square add_invoice_row"></i>
</div>
</body>
</html>

JavaScript

$(".add_invoice_row").click(function () {
  var current_index = $('.invoicerow').length;
  var invoicehtml = '' +
  '<div class="invoicerow">' +
  '  <div class="row">' +
  '    <div class="col-12 col-md-2">' +
  '      <label for="">Aantal</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <input type="text" name="invoice_row[' + current_index + '][invoice_quantity]">' +
  '      </div>' +
  '    </div>' +
  '    <div class="col-12 col-md-5">' +
  '      <label for="">Titel</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <input type="text" name="invoice_row[' + current_index + '][invoice_title]">' +
  '      </div>' +
  '    </div>' +
  '    <div class="col-12 col-md-2">' +
  '      <label for="">Prijs</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <input type="text" name="invoice_row[' + current_index + '][invoice_price]">' +
  '      </div>' +
  '    </div>' +
  '    <div class="col-12 col-md-2">' +
  '      <label for="">Totaal</label>' +
  '      <div>€99,05</div>' +
  '    </div>' +
  '    <div class="col-12 col-md-1 d-flex align-center">' +
  '      <i class="fas fa-trash-alt delete_invoice_row"></i>' +
  '    </div>' +
  '    <div class="col-12">' +
  '      <label for="">Beschrijving</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <textarea type="text" name="invoice_row[' + current_index + '][invoice_desc]"></textarea>' +
  '      </div>' +
  '    </div>' +
  '  </div>' +
  '</div>' +
  '';
  $('.new_invoice_row').append(invoicehtml);

  create_invoice_form = $(".create_invoice_form").serialize();
  $.ajax({
    type:'post',
    url:"invoice_custom.php",
    data:({
      create_invoice_form: create_invoice_form
    }),
    success:function(data){
      console.log(data);
    }
  });
});

$(document).on('click', '.delete_invoice_row', function () {
  $(this).closest('.invoicerow').remove();
  $('.invoicerow').each(function(idx, el) {
   ...