CRUD edit model data now shown - php

Question

I got some problem using jquery for displaying existing data when crud edit button is click. The bootstrap popup windows is shown if I remove $('#catid).val(data[0]); and $('#catname).val(data[1]); from the code.If add back the code, the bootstrap popup windows not showing without error. Not sure it is the script problem or the form problem. Anyone can help! Thanks.
enter code here
<!-- Edit Model -->
<div class="modal fade" id="editcatmodel" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" name="catid" id="catid">
<div class="form-group">
<label>Category Name</label>
<input type="text" name="catname" id="catname" class="form-control">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">save</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<!-- Main screen display the crud data with edit button -->
<div class="container">
<table class="table">
<thead>
<th>ID</th>
<th>Category</th>
<th>Action</th>
</thead>
<tbody>
<?php
require_once 'source/db_connect.php';
$sql = "SELECT * FROM category";
$result = mysqli_query($link, $sql);
if ($result->num_rows > 0) {
//output data of each row
while ($row = $result->fetch_assoc()) {
?>
<tr>
<td><?php echo $row['catid']; ?></td>
<td><?php echo $row['catname']; ?> </td>
<td> <button type="button" class="btn btn-primary editcatbtn">edit</button> </td>
</tr>
<?php }
}
?>
<!-- script display the modal -->
<script>
$(document).ready(function () {
$(' .editcatbtn').on('click', function() {
$('#editcatmodel').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function() {
return $(this).text();
}).get();
console.log(data);
$('#catid).val(data[0]);
$('#catname).val(data[1]);
});
});
</script>