将数据插入我的CRUD表

Question

I have this AJAX code that will insert data to my CRUD table. But when I click the button that will save/insert the data to my table it will not show. All I want here is to insert my data using AJAX to my table without refreshing or using the form element in html.

Here is my code with my modal and the body of my table:

$(document).ready(function() {
  // Add
  $('#btn_add').click(function() {
    var id = $('#brand_id').val();
    var bname = $('#bname').val();
    var bstatus = $('#bstatus').val();

    $.ajax({
      url: 'add_brand.php',
      method: 'POST',
      data: {
        bname: bname,
        bstatus: bstatus
      },
      success: function(data) {
        $('#' + id).children('td[data-target=brand_name]').text(bname);
        $('#' + id).children('td[data-target=brand_status]').text(bstatus);
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="modal-default">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Add a brand</h4>
      </div>
      <div class="modal-body">
        <input type="hidden" id="brand_id" />
        <div class="form-group">
          <label for="bname">Brand Name</label>
          <input type="text" class="form-control" id="bname" name="bname" placeholder="Brand Name" />
        </div>
        <div class="form-group">
          <label for="bstatus">Status</label>
          <select class="form-control select2" style="width: 100%;" id="bstatus" name="bstatus">
                                <option>Available</option>
                                <option>Not Available</option>
                            </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary" id="btn_add">Save Changes</button>
      </div>
    </div>
  </div>
</div>

<tbody>
    <?php 
        include("db_connect/connect.php");

        $query = mysqli_query($con, "SELECT * FROM brand");
        while ($row = mysqli_fetch_array($query)) { ?>
            <tr id="<?php echo $row['brand_id']; ?>">
                <td data-target="brand_name"><?php echo $row["brand_name"]; ?></td>
                <td data-target="brand_status"><?php echo $row["brand_status"]; ?></td>
                <td>
                    <a data-role="edit" data-id="<?php echo $row['brand_id']; ?>" class="btn btn-success"><i class="fa fa-edit"></i> Edit</a>
                    <a href="brand.php" data-role="delete" data-id="<?php echo $row['brand_id']; ?>" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete</a>
                </td>
            </tr>
        <?php
        }
    ?>
</tbody>

</div>