JSFiddle - React, Tailwind, and code Playground

HTML

<div id="add_to_study_group" data-group_id="4">
     <h2 class="sidebar_heading">ADD MEMBERS</h2>

    <ul class="class_tags">
        <li>
            <table id="club-sgroups-sidebar">
                <tbody>
                    <tr id="empty-sgroup-row-sidebar" class="hidden">
                        <td>
                            <input type="text" class="search-sgroup-user-sidebar ui-autocomplete-input" id="sgroup-user-0" name="sgroup_user[0]" placeholder="Enter student name…" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" />
                            <button class="remove-item bold remove-sgroup" type="button" style="display: none;">×</button>
                            <input type="hidden" class="sgroup-user-id" id="sgroup-user-id-0" name="sgroup_user_id[0]" value="" />
                        </td>
                    </tr>
                    <tr class="new-row">
                        <td>
                            <input type="text" class="search-sgroup-user-sidebar ui-autocomplete-input" id="sgroup-user-1" name="sgroup_user[1]" placeholder="Enter student name…" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true" />
                            <button class="remove-item bold remove-sgroup" type="button" style="display: none;">×</button>
                            <input type="hidden" class="sgroup-user-id" id="sgroup-user-id-1" name="sgroup_user_id[1]" value="" />
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td> <a href="#" id="add-new-sgroup-sidebar">+ Add another member</a>

                        </td>
                    </tr>
                </tfoot>
            </table>
        </li>
        <li><a class="btn btn-dark_blue fr" href="javascript: add_to_study_group();" id="add_members_to_study_group_link">Add to Study Group</a>
        </li>
    </ul>
</div>

CSS

.hidden {
    display: none;
}
ul {
    margin: 0;
}
li {
    list-style-type: none;
}

JavaScript

var toodledata = ['Martin Floggy', 'MCgee Tuute', 'Other People', 'Need to Learn', 'Jquery so i can', 'sleep', 'at night'];
add_new_sgroup_sidebar = $('#add-new-sgroup-sidebar');
empty_sgroup_row_sidebar = $('#empty-sgroup-row-sidebar');

// Clone, filter madness, and bind autocomplete
function autocomplete_users(element) {
    // Get size
    var size = parseInt($('#club-sgroups-sidebar tr.new-row').size()) + 1;
    // Let's return so we can append/insert
    return element.clone(true, true)
        .removeClass('hidden')
        .addClass('new-row')
        .removeAttr('id')
        .find('input').each(function (index) {
            // Filter madness
            $(this).attr('name', $(this).attr('name').replace('[0]', '[' + size + ']'));
            $(this).attr('id', $(this).attr('id').replace('-0', '-' + size));
        }).autocomplete({
            minLength: 3,
            delay: 100,
            source: toodledata
        });
}

$('#add_to_study_group').on('click', '#add-new-sgroup-sidebar', function (e) {
    e.preventDefault();
    $('#club-sgroups-sidebar').append(autocomplete_users(empty_sgroup_row_sidebar));
});

autocomplete_users($('.search-sgroup-user-sidebar'));