How to split a data that comes from select element using jquery and ajax

See more:

Javascript

Ajax

jQuery

My problem is when splitting a data. First select element is to choose a person, upon clicking it, it will display another data inside second element and then upon select the result will append it's corresponding data to the third select element. Problem I could not separate it and when I tried splitting it doesn't work.


Here is my code

function ToolsChange(element) {
    let tools_controller = $(element).val();
    if (tools_controller) {
        $.ajax({
          type: "post",
          url: "form_ajax_for_request.php",
          data: {
            "tools_cont": tools_controller
          },
          success: function(response) {
            // alert(response);
            var dataSplit = response;
            var shouldSplit = dataSplit.split("@");
            // alert(shouldSplit[1]);
            $('#sel_requested_dept').html('');
            $('#sel_requested_dept').append(response);
            $('#sel_requested_dept').selectpicker('refresh');

            $('#sel_requested_section').html('');
            $('#sel_requested_section').append(shouldSplit[2]);
            $('#sel_requested_section').selectpicker('refresh');
          }
        });
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label> Tools Controller: </label>
  <select class="form-control selectpicker" name="tools_controller" data-live-search="true" onchange="ToolsChange(this)" required>
    <option value="" selected disabled> Select Tools Controller </option>
    <?php
      $query = "SELECT * FROM tools_dept_registration";
      $con->next_result();
      $result=mysqli_query($con,$query);
      if(mysqli_num_rows($result)>0)
      {
         while($row=mysqli_fetch_assoc($result))
         {
          echo '<option value="'.$row['name_of_controller'].'">'. $row['name_of_controller']
          .'</option>';
         }
      }
   ?>
  </select>
</div>

<div class="form-group">
  <label> Department </label>
  <select name="request_dept" id="sel_requested_dept" class="form-control selectpicker" data-live-
    search="true" required>
    <option value="" selected disabled> Select Department </option>

  </select>
</div>


<div class="form-group">
  <label> Section/Model </label>
  <select name="request_section_model" id="sel_requested_section" class="form-control selectpicker" data-live-search="true" required>
    <option value="" selected disabled> Select Section/Model </option>

  </select>
</div>

Whole code inside my ajax/php

<?php 

    include("../include/connect.php");
    
     
        if(isset($_POST['tools_cont'])){
    
            $ID = $_POST['tools_cont'];
    
            $query = "SELECT * FROM tools_dept_registration 
            RIGHT JOIN tools_section_model_reg ON tools_section_model_reg.dept_id = tools_dept_registration.ID
            WHERE name_of_controller = '$ID'";
            $con->next_result();
            $result=mysqli_query($con, $query);
            
            if(mysqli_num_rows($result)>0)
            {
                while($row = mysqli_fetch_assoc($result))
                {
                    echo "@" . '<option value="'.$row['dept_name'].'">'. $row['dept_name'] . " - " . $row['ass_leader'] . '</option>' 
                    . "@" .'<option value="'.$row['section_model'].'">'. $row['section_model'] .'</option>';
                }
            }
        }
    ?>

What I have tried:

What I did was I created a 3 `` elements. I manage and successfully got the data and tried splitting it