JSFiddle - React, Tailwind, and code Playground

by Stephen Torres

HTML

<a href="#" id="insert-more"> Add New Row </a>

<br>
<table id="mytable">
    <thead>
        <th>Item</th>
        <th>Object</th>
    </thead>
    <tbody>
        <tr>
            <td>
                <select name="code">
                    <option value="1">Item1</option> 
                    <option value="2">Item2</option>
                    <option value="2">Item3</option>
                </select>
            </td>
            <td>
                <input class="tags" size="50">
            </td>
        </tr>
		<tr>
            <td>
                <select name="code">
                    <option value="1">Item3</option>
                    <option value="2">Item4</option>
                    <option value="2">Item5</option>
                </select>
            </td>
            <td>
                <input class="tags" size="50">
            </td>
        </tr>
		<tr>
            <td>
                <select name="code">
                    <option value="1">Item6</option>
                    <option value="2">Item7</option>
                    <option value="2">Item8</option>
                </select>
            </td>
            <td>
                <input class="tags" size="50">
            </td>
        </tr>
		<tr>
            <td>
                <select name="code">
                    <option value="1">Item9</option>
                    <option value="2">Item1</option>
                    <option value="2">Item4</option>
                </select>
            </td>
            <td>
                <input class="tags" size="50">
            </td>
        </tr>
    </tbody>
</table>

JavaScript

$(function () {
    var availableTags = [
        "A 1 Object ", "A 2 Object ", "B Object ", "C Object ", "D Object ", "E Object ", "F Object ", "G Object ", "H Object ", "I Object "];
    function split( val ){
  return val.split( /,\s*/ );
}
function extractLast( term ) {
  return split( term ).pop();
}
    autcomplet_func = {
        minLength: 0,
        source: function (request, response) {
            // delegate back to autocomplete, but extract the last term
            response($.ui.autocomplete.filter(
            availableTags, extractLast(request.term)));
        },
        focus: function () {
            // prevent value inserted on focus
            return false;
        },
        select: function (event, ui) {
            var terms = split(this.value);
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push(ui.item.value);
            // add placeholder to get the comma-and-space at the end
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    };
    
 $(".tags").bind("keydown",function (event) {
        // don't navigate away from the field on tab when selecting an item
        if (event.keyCode === $.ui.keyCode.TAB && $(this).autocomplete("instance").menu.active) {
            event.preventDefault();
        }

    }).autocomplete(autcomplet_func);
    
    

    $("#insert-more").click(function () {
        var lastRow = $('#mytable tr:last').clone();
        $(lastRow).find('input').val('');
         $('.tags', lastRow).autocomplete(autcomplet_func);
        $('#mytable').append(lastRow);
    });

});