jQuery onClick function not trigger if the datatable collapse to responsive view on mobile

Currently I'm using datatable responsive for displaying my table, the "Edit" button work well if it showing full width, but once it goes to responsive on mobile then the button won't trigger the modal and also display.

I did try with "vclick" or " touchstart" on the onclick function but still no luck.

Here my code for the jQuery :

$( "#btnSearch" ).click(function(event){
      var branch = $('#searchByBranch').val();
      var startDate = $('#searchByDateFromValue').val();
      var endDate = $('#searchByDateToValue').val();

      event.preventDefault();
      $.ajax({
          type : "POST",
          url: "<?php echo base_url(); ?>index.php/Manage_Sales/searchSalesByDateRange",
          data : { from: startDate, to: endDate , branch : branch},
          success : function(response) {
              $("#searchResult").html(response);
          }
          }).done(function(){
            var level = <?php print($sessionLevel)?>;
            
              $("#resultTable_ReplaceCard").DataTable({
                    "responsive": true, "lengthChange": true, "autoWidth": true,
                    "lengthMenu": [
                          [50, 100, -1],
                          [50, 100, 'All'],
                      ],
                      "order" : [1, 'desc'],
              }).buttons().container().appendTo('#resultTable_wrapper .col-md-6:eq(0)');

                //Edit Replace Card
                $('.editReplaceCardBtn').on('click', function (){
                $('#replaceCard_Modal').modal('show');

                $tr = $(this).closest('tr');

                var data = $tr.children("td").map (function(){
                  return $(this).text();
                }).get();

                $('#replaceCard_ID').val(data[0]);
                $('#replaceCard_Amount').val(data[3]);
              });

            });
    });

My datatable code as below :

  //Replace Card Tab
              $result_ReplaceCard = $this->Sales_Model->getCardReplaceList($startDate, $endDate, $branch);
              if($result_ReplaceCard == TRUE){

                echo '
                <div class = "row">
                <div class= " col-12 col-sm-12">
                <table id="resultTable_ReplaceCard" class="table table-bordered table-striped dataTable display" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                      <th>ID</th>
                      <th>Name</th>
                      <th>Manage By</th>
                      <th>Amount</th>
                      <th>Datetime</th>
                      <th>Action</th>
                    </tr>
                    </thead>
                    <tbody>
                ';
                foreach($result_ReplaceCard as $row){
                  //Show Result
                  echo "<tr>
                          <td>$row->id</td>
                          <td>$row->name</td>
                          <td>$row->loginUser</td>
                          <td>$row->amount</td>
                          <td>$row->rdate</td>
                          <td>
                          <button type=\"button\" class = \"btn btn-success editReplaceCardBtn\" >EDIT</button>
                         </td>
                        </tr>
                    ";
                }
                echo '
                </tbody>
                <tfoot>
                <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Manage By</th>
                <th>Amount</th>
                <th>Datetime</th>
                <th>Action</th>
                </tr>
                </tfoot>
                </table>
                </div>
                </div>
                ';

The edit button callback was fine when it was full width, it does not responce once it goes to responsive on mobile. Please help