JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<button id="add-row">
Click to add a row
</button>
<table id="findings-table" class="table table-striped table-hover">
    <tr>
         <th>Code</th>
         <th>Description</th>
    </tr>
    <tbody>
    <tr>
         <td><input style="width: 70px;" type="text" id="code1" name="code[]" class="form-control addNew"></td>
         <td><textarea class="addNew" cols="30" rows="3" id="descrip1" name="descrip[]"></textarea></td>
    </tr>
    </tbody>
</table>

JavaScript

$("#add-row").click(function(){
    var lastRow = $('#findings-table tbody>tr:last');
    var cloned = lastRow.clone();
    cloned.find('.addNew, select, textarea').each(function () {
        var id = $(this).attr('id');
        var regIdMatch = /^(.+)(\d+)$/; 
        var aIdParts = id.match(regIdMatch);
        index = (parseInt(aIdParts[2], 10) + 1);
        var newId = aIdParts[1] + index;
        $(this).attr('id', newId);        
    });
    cloned.find("input[type='text']").val('');
    cloned.find("textarea").val('');
    cloned.insertAfter(lastRow);    
           
    addBinding(index);
    
    
});



function addBinding(index) {
		$("#code" + index).autocomplete({
        source: "/search_ajax.php",
        minLength: 1,
        select: function(event, ui) {
            $(this).val(ui.item.id);
        }
    });
}


addBinding(1);