JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container-fluid">
  <div class="row">

    <div class="jumbotron">

      <div>
        <input type="button" class="btn btn-secondary" id="btnAdd" title="Add" value="Add" />
        <input type="button" class="btn btn-secondary" id="btnDelete" title="Delete" value="Delete" />
        <input type="button" class="btn btn-secondary" id="btnAddConsItem" title="Add" value="Add Construct Id" />
      </div>

      <div>


        <table id="invoiceTable" class="table">
          <thead>
            <tr>
              <th><input class="checkbox" id="checkboxtoggle" type="checkbox" /></th>
              <th nowrap>Part ID<span class="mandatory"><i class="glyphicon glyphicon-asterisk"></i></span></th>
              <th>Description</th>
              <th>Vendor CATNO</th>
              <th>Serial / Lot Num<span class="mandatory"><i class="glyphicon glyphicon-asterisk"></i></span></th>
              <th>Quantity<span class="mandatory"><i class="glyphicon glyphicon-asterisk"></i></span></th>
              <th>List Price</th>
              <th>Item Total</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>

            <tr id="tmplRow" data-invoicePartId="100" data-notes="@invoice.Notes">
              <td><input type="checkbox" id="check" class="checkbox" /></td>
              <td><input type="text" id="partId" class="form-control ipart" value="" required /></td>
              <td><textarea class="form-control description" id="description" name="description" disabled required></textarea></td>
              <td><input type="text" id="vendorCatno" class="form-control vendorCatNo" value="" disabled required/></td>
              <td><input type="text" id="serialNo" class="form-control serialNo" value="" required/></td>
              <td><input type="text" id="quantity" class="form-control qty" value="" name="qty" required/></td>
             ...

CSS

#templateTable {
  display: none;
}

.subRowColor {
  background-color: yellow;
}

JavaScript

$("body").on("click", "#btnAdd", function() {
  var a = $("#templatelRow").data()['parentid'] -= 1;
  var tmplRow = $("#templatelRow").html();
  $("#invoiceTable tbody").append("<tr>" + tmplRow + "</tr>");
});

$("body").on("click", "#btnAddConsItem", function() {
  var row = $('#btnAddConsItem').data("row-id");
  var PPID = row.attr("data-invoicePartId");
  var chkBoxCount = $("input:checkbox:checked").length;
  var tmplSubRow = $("#templatelRow").html();
  $(".price",tmplSubRow).hide();
  if (chkBoxCount > 0) {
    var noOfRows = prompt("Enter number of rows");
    $('#templatelRow').data("parentid", PPID);
    
    for (i = 0; i < noOfRows; i++) {
      row.after("<tr class='subRowColor' data-parentid="+PPID+">" + tmplSubRow + "</tr>");
      var SPID = $('#templatelRow').data("parentid")
    }
  } else {
    alert("Please select a checkbox");
  }
   $('input:checkbox').removeAttr('checked');
});

$("body").on("click", ".checkbox", function() {
  var currentRow = $(this).closest("tr");
  $('#btnAddConsItem').data("row-id", currentRow);
});