Live check availability inside dynamic form - php

Question

I have 2 forms, static and dynamic form. Dynamic is optional, depends on user if they want to submit more than one inputs. The insertion process works fine. Then, I have a function to check the availability for the input that user want to insert. The thing is, the live check availability only works in static form. How I want to call back the live check availability function inside the dynamic form? Your help is truly appreciate :)
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);