在动态表单内实时查看可用性

Question

我有2种形式，静态和动态形式。动态是可选的，如果用户想要提交多个输入，则取决于用户。插入过程正常。然后，我有一个函数来检查用户想要插入的输入的可用性。问题是，实时检查可用性仅适用于静态形式。我想如何回调动态表单中的实时检查可用性功能？你的帮助真的很感激：）

的index.php

//static form
<form action="" method="post" enctype="multipart/form-data">
    <div class="field_wrapper">
        <div class="row">
            <div class="col-md-1">
                <a rel="tooltip" title="Add" class="btn btn-info btn-icon add_button" href="javascript:void(0);"><i class="ti-plus"></i></a>
            </div>

            <div class="col-md-2">
                <div class="form-group">
                    <label class="control-label pull-left">Category<star>*</star>
                    </label>
                    <input class="form-control" type="text" name="cat[]" id="cat" title="This field needed" required="true" placeholder="Student"/><span id="usercheck3" class="help-block pull-left"></span>
                </div>
            </div>
        </div>
    </div>

        <div class="row">
            <div class="col-md-12">
                <div class="form-group">
                    <input class="btn btn-warning btn-fill btn-wd pull-right" name="submit2" id="submit2" type="submit" value="Add">
                </div>
            </div>
        </div>
        <br>
</form>

<script type="text/javascript">

    $(document).ready(function(){

        //live check availability
        $('#cat').keyup(function() {
            var usercheck3 = $(this).val();
            $.post("check.php", {user_name3: usercheck3} , function(data)
            {
                if (data.status == true)
                {
                    $('#usercheck3').parent('div').removeClass('has-error').addClass('has-success');
                    $('#submit2').attr("disabled", false);
                } else {
                    $('#usercheck3').parent('div').removeClass('has-success').addClass('has-error');
                    $('#submit2').attr("disabled", true);
                }

                $('#usercheck3').html(data.msg);
            },'json');
        });

        //dynamic form
        var addButton = $('.add_button');
        var wrapper = $('.field_wrapper');
        var fieldHTML = '<div class="form-group"><div class="row"><div class="col-md-1"><a rel="tooltip" title="Delete" class="btn btn-info btn-icon remove_button" href="javascript:void(0);"><i class="ti-minus"></i></a></div><div class="col-md-2"><label class="control-label pull-left">Category<star>*</star></label><input class="form-control" type="text" name="cat[]" id="cat" title="This field needed" required="true" placeholder="Student"/><span id="usercheck3" class="help-block pull-left"></span></div></div>';

        var x = 1;
        $(addButton).click(function(){
            x++;
            $(wrapper).append(fieldHTML);
        });

        $(wrapper).on('click', '.remove_button', function(e){
            e.preventDefault();
            $(this).parents('.form-group').remove();
            x--;
        });
    });
</script>

check.php

//db connection

if (isset($_POST['user_name3']) && $_POST['user_name3'] != '') {
    $response = array();
    $cat = $_POST['user_name3'];

    $sql = "select cat from cat_tables where cat='" . $cat . "'";
    $res = mysqli_query($con, $sql);
    $count = mysqli_num_rows($res);
    if ($count > 0) {
        $response['status'] = false;
        $response['msg'] = 'Not available';
    } else {
        $response['status'] = true;
        $response['msg'] = 'Available';
    }
}
echo json_encode($response);