JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.mediacor.co.za/setup_practice_preference_check_code.php"></script>
<table>
    <tr id="show_codes">
        <td colspan="2" class="text-fields" align="center" valign="middle">
            <div class="codeForm">
                <table class="codeForm" align="left" width="500px" cellpadding="0" style="padding-left: 20px;" cellspacing="0">
                    <tbody id="mytbody">
                        <tr>
                            <td height="15px"></td>
                        </tr>
                        <tr>
                            <td width="250px" height="25" align="center" valign="middle" style="border-right: 1px solid #bfbebe;" bgcolor="#6596b8" class="table_header_rounded_corners_left">Code</td>
                            <td width="250px" height="20" align="center" valign="middle" style="border-right: 1px solid #bfbebe;" bgcolor="#6596b8" class="table_header">Value</td>
                            <td width="250px" height="20" align="center" valign="middle" style="border-right: 1px solid #bfbebe;" bgcolor="#6596b8" class="table_header_rounded_corners_right">Remove</td>
                        </tr>
                        <tr class="code_row">
                            <td class="details-border1" height="40px" valign="middle" bgcolor="#f3f3f3" align="center">
                                <input id="code" value="" class="text ui-widget-content ui-corner-all" type="text" name="code[]" />
                                <div id="status"></div>
                            </td>
                            <td class="details-border2" bgcolor="#f3f3f3" align="center">
                                <input value="" class="text ui-widget-content ui-corner-all" type="text" name="value[]" />
                            </td>
                            <td class="borders-right-bottom" bgcolor="#f3f3f3" align="center">
                                <input type="button" border="0" class="btnDeleteCode" value="Delete" />
      ...

JavaScript

$(document).ready(function () {

    var clonedRow = $('.code_row').clone(true).html();
    var appendRow = '<tr class = "code_row">' + clonedRow + '</tr>';
    var counter = 0;
    $('#btnAddCode').click(function () {
        $('.codeForm tr:last').after(appendRow);
        counter++;
        $('.codeForm tr:last input[type="text"][name="code"]').attr('name', 'code[' + counter + ']');
        $('.codeForm tr:last input[type="text"][name="value[]"]').attr('name', 'value[' + counter + ']');
        $('.codeForm tr:last div[id="status"]').attr('id', '#status' + counter + '');
        $('.codeForm tr:last input[type="text"]').attr('id', 'code[' + counter + ']').change(function (index) {
            var usr = $(this).val();
            if (usr.length >= 4) {
                $('#status' + counter + '').html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
                alert(usr);
                $.ajax({
                    type: "POST",
                    url: "setup_practice_preference_check_code.php",
                    data: "username=" + usr,
                    success: function (msg) {
                        $('#status' + counter + '').ajaxComplete(function (event, request, settings) {
                            alert($(this));
                            if (msg == 'OK') {
                                $(this).removeClass('object_error'); // if necessary
                                $(this).addClass("object_ok");
                                $(this).html('&nbsp;<img src="tick.gif" align="absmiddle">');
                            } else {
                                alert('msg');
                                $(this).removeClass('object_ok'); // if necessary
                                $(this).addClass("object_error");
                                $(this).html(msg);
                            }
                        });
                    }
                });
            } else {
               ...