php - input value from ajax call does not work inside script from main code

one text

My Code:

//html
    <div class="addto-search">
       <div class="form-input">
          <input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
       </div>
    </div>
    <div class="addto-playlists row" id="dynamic_content"></div>
    <div id="checkbox-list">
       <div>
          <label class="filter"> Assigned Categories</label>
       </div>
          <div class="table-wrap">
             <table class="table" style="width:100%">
                <thead class="thead-primary">
                   <tr>
                      <th>Sl.</th>
                      <th>Category</th>
                      <th>Display Name</th>
                      <th>Display Order</th>
                   </tr>
                </thead>
                <tbody  id="Category-container" class="group-containers">
                </tbody>
             </table>
          </div>
       </div>


   //script

<script type="text/javascript">
  $(document).ready(function(){

    load_data(1);

    function load_data(page, query = '')
    {
      $.ajax({
        url:"category-filter.php",
        method:"POST",
        data:{page:page, query:query},
        success:function(data)
        {
          $('#dynamic_content').html(data);
        }
      });
    }

    $(document).on('click', '.page-link', function(){
      var page = $(this).data('page_number');
      var query = $('#search_box').val();
      load_data(page, query);
    });

    $('#search_box').keyup(function(){
      var query = $('#search_box').val();
      load_data(1, query);
    });

  });
</script>

<script type="text/javascript">
         $(function() {
           
             var $groupContainers  = $('.group-containers'),
                 userChoices       = [];
         
             $('input:checkbox').on('change', function() {
                 
                 var $checkedBox     = $(this),
                     checkedBoxLabel = $checkedBox.parent('label').text(),
                     checkedValue    = $checkedBox.val(), 
                     category        = $checkedBox.data('category'),
                     alreadyChecked  = !$checkedBox[0].checked;
                 
                 
                 if(alreadyChecked){
                   removeChoiceFromModel(category, checkedValue);
                 } else {
                   addChoiceToModel(category, checkedValue);
                 }
                 
                 updateDom();
                 
                 return;
               
                 function cleanGroupContainers(){
                   $groupContainers.each(function(){
                       var list = $(this).find('tr');
                       
                       if(list.length){
                         list.remove();
                       }
                   });
                 }
                  
                
                 function updateDom(){
                   cleanGroupContainers();
                   appendChoices();
                   hideEmptyLists();
                 }
               
               function appendChoices(){
                 
                  var i, option, $categoryDiv,
                 
                     len = userChoices.length;
                 if(!len) return false;
                 
                 for(i = 0; i < len; i++){
                   option        = userChoices[i];
                   $categoryDiv  = $('#' + option.category + '-container');
                   j=i+1;
                   $categoryDiv.append('<tr><td>'+ j +'</td><td>'+ option.value +'</td><td><input type="text" value="'+option.value+'"></td><td><input type="number" value="0"></td></tr>'); 
                 }
                 
               }
               
               function hideEmptyLists(){
                 
                 $groupContainers.each(function(){
                     var $container = $(this),
                         items = $container.find('tr > td');
                     
                     if(!items.length){
                       $container.hide();
                       return true;
                     }
                     
                     $container.show();
                 });
               }
               
               function addChoiceToModel(category, value){
                 userChoices.push({
                   category: category,
                   value: checkedValue
                 });
               }
                
               function removeChoiceFromModel(category, value){
               
                 var i, option,
                 
                     len = userChoices.length;
                 if(!len) return false;
                 
                 for(i = 0; i < len; i++){
                   option = userChoices[i];
                   
                   if(option.category === category && option.value === value){
                     userChoices.splice(i, 1);
                     return;
                   }
                 }                 
               }         
             });          
         });
</script>

//category-filter.php

<?php

$connect = new PDO("mysql:host=localhost; dbname=charges", "root", "");

$limit = '5';
$page = 1;
if($_POST['page'] > 1)
{
  $start = (($_POST['page'] - 1) * $limit);
  $page = $_POST['page'];
}
else
{
  $start = 0;
}

$query = "
SELECT * FROM category_table 
";

if($_POST['query'] != '')
{
  $query .= '
  WHERE category_name LIKE "%'.str_replace(' ', '%', $_POST['query']).'%" 
  ';
}

$query .= 'ORDER BY id ASC ';

$filter_query = $query . 'LIMIT '.$start.', '.$limit.'';

$statement = $connect->prepare($query);
$statement->execute();
$total_data = $statement->rowCount();

$statement = $connect->prepare($filter_query);
$statement->execute();
$result = $statement->fetchAll();
$total_filter_data = $statement->rowCount();

$output = '';
if($total_data > 0)
{
  foreach($result as $row)
  {
    $output .= '
    <label><input type="checkbox" value="'.$row["category_name"].'" data-category="Category" name="category_name"> <span>'.$row["category_name"].'</span></label>
    ';

  }
}
else
{
  $output .= '
  <p>No Data Found</p>
  ';
}

$output .= '
  <ul class="pagination">
';

$total_links = ceil($total_data/$limit);
$previous_link = '';
$next_link = '';
$page_link = '';

//echo $total_links;

if($total_links > 4)
{
  if($page < 5)
  {
    for($count = 1; $count <= 5; $count++)
    {
      $page_array[] = $count;
    }
    $page_array[] = '...';
    $page_array[] = $total_links;
  }
  else
  {
    $end_limit = $total_links - 5;
    if($page > $end_limit)
    {
      $page_array[] = 1;
      $page_array[] = '...';
      for($count = $end_limit; $count <= $total_links; $count++)
      {
        $page_array[] = $count;
      }
    }
    else
    {
      $page_array[] = 1;
      $page_array[] = '...';
      for($count = $page - 1; $count <= $page + 1; $count++)
      {
        $page_array[] = $count;
      }
      $page_array[] = '...';
      $page_array[] = $total_links;
    }
  }
}
else
{
  for($count = 1; $count <= $total_links; $count++)
  {
    $page_array[] = $count;
  }
}
if(!$total_data == 0) {
for($count = 0; $count < count($page_array); $count++)
{
  if($page == $page_array[$count])
  {
    $page_link .= '
    <li class="page-item active">
      <a class="page-link" href="#">'.$page_array[$count].' <span class="sr-only">(current)</span></a>
    </li>
    ';

    $previous_id = $page_array[$count] - 1;
    if($previous_id > 0)
    {
      $previous_link = '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page_number="'.$previous_id.'">Previous</a></li>';
    }
    else
    {
      $previous_link = '
      <li class="page-item disabled">
        <a class="page-link" href="#">Previous</a>
      </li>
      ';
    }
    $next_id = $page_array[$count] + 1;
    if($next_id >= $total_links)
    {
      $next_link = '
      <li class="page-item disabled">
        <a class="page-link" href="#">Next</a>
      </li>
        ';
    }
    else
    {
      $next_link = '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page_number="'.$next_id.'">Next</a></li>';
    }
  }
  else
  {
    if($page_array[$count] == '...')
    {
      $page_link .= '
      <li class="page-item disabled">
          <a class="page-link" href="#">...</a>
      </li>
      ';
    }
    else
    {
      $page_link .= '
      <li class="page-item"><a class="page-link" href="javascript:void(0)" data-page_number="'.$page_array[$count].'">'.$page_array[$count].'</a></li>
      ';
    }
  }
}
}
$output .= $previous_link . $page_link . $next_link;
$output .= '
  </ul>
';

echo $output;

?>

In the above code, live search from database works fine. but when items from checkbox selected, the respective category data should be displayed in the table and when checkbox is unselected, category data should be hidden, which is not working in above code.

If I remove code for the search and pagination that is ajax code, checkbox works fine.

I think input value fetched from the category-filter.php is not able to use in main code.

Expected Ouput: