JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post" accept-charset="utf-8" name="form" id="form" style="" enctype="multipart/form-data">
    <button name="button" type="button" id="addrow" class="addrow" title="Add row to bottom">Add Row</button>
    <table style="border-radius: 5px;" class="orderDetail" id="orderDetail">
        <th style="border-radius: 5px;">Ins</th>
        <th style="border-radius: 5px;">Del</th>
        <th style="border-radius: 5px;">Cust PN</th>
        <th style="border-radius: 5px;">PN</th>
        <th style="border-radius: 5px;">Description</th>
        <th style="border-radius: 5px;">Qty</th>
        <th style="border-radius: 5px;">UOM</th>
        <th style="border-radius: 5px;">Sale Price</th>
        <th style="border-radius: 5px;">Dock Date</th>
        <th style="border-radius: 5px;">Commit Date</th>
        <th style="border-radius: 5px;">Program</th>
        <tr>
            <td>
                <button type="button" id="ins_1" class="insertbutton" title="Insert before this row">+</button>
            </td>
            <td>
                <button type="button" id="del_1" class="removebutton" title="Remove this row">-</button>
            </td>
            <td style="border-radius: 5px;">
                <input type="text" name="custPN[]" value="" id="custPN_1" maxlength="25" size="10" style="" placeholder="Cust PN" />
            </td>
            <td style="border-radius: 5px;">
                <select id="PN_1" name="PN[]">
                    <option value="">Part Number</option>
                    <option value="Prototype">Prototype</option>
                    <option value="Consumable">Consumable</option>
                </select>
            </td>
            <td style="border-radius: 5px;">
                <input type="text" name="description[]" value="" id="description_1" maxlength="144" size="25" style="" />
            </td>
            <td style="border-radius: 5px;">
                <input type="text" name="qty[]" value="" id="qty1"...

JavaScript

$(document).ready(function () {
    $("#addrow").click(function(){
        var rowCount = $('#orderDetail tr').length;
        $("tr:last").clone().find('input, select').each(function() {
            $(this).attr({
              'id':  function(_, id) { 
               var regex = /[a-zA-Z3]+[_]/
               return id.match(regex) + rowCount },
              //'name':  function(_, name) { return name + rowCount },
              'value': '',
            });
        })
              .end().appendTo("#orderDetail > tbody:last");
    });
});

$(document).on('click', 'button.insertbutton', function () {
    var rowCount = $('#orderDetail tr').length;
    $(this).closest('tr').before($(this).closest('tr').clone());
    $(this).closest('tr').find('input, select').each(function() {
        $(this).attr({
            'id': function(_,id) {
                var regex = /[a-zA-Z3]+[_]/
                return id.match(regex) + rowCount },
            'value': '',
        })
    })
    
    return true;
});

$(document).on('click', 'button.removebutton', function () {
    var rowCount = $('#orderDetail tr').length - 1;
    if(rowCount == 1){
        alert('You Must Have At Least One Row')
        return false
    }
    else{
        $(this).closest('tr').remove();
        return true;
        }
}); 

$('#orderDetail').ready(function () {
    $("[id^=PN_]").on('change',function(event) {
        var PN = $(event.target).val();
        var ID = event.target.id;
        alert('Successfully triggered by onChange from "'+ID+'"');  
    });
});