how can I separate the data where I used split and the one I want to see the whole data using JQuery?

So what my output does is that when I select a tools name it automatically picks the specification on it and shows the control number, the only problem is when I create multiple data to specify my tools name it only shows the first specified tools name in that data and in my console.log it shows an array.

Here is the picture of my form

Here is my console.log(response) output

PSA-10000@BLACK & DECKER@T-1001@PSA-10000@BLACK & GOLD@T-1001@PSA-10000@BLACK & WHITE@T-1001@

Here is my console.log(shouldSplit) output

(10) ["PSA-10000", "BLACK & DECKER", "T-1001", "PSA-10000", "BLACK & GOLD", "T-1001", "PSA-10000", "BLACK & WHITE", "T-1001", ""]
0: "PSA-10000"
1: "BLACK & DECKER"
2: "T-1001"
3: "PSA-10000"
4: "BLACK & GOLD"
5: "T-1001"
6: "PSA-10000"
7: "BLACK & WHITE"
8: "T-1001"
9: ""
length: 10

Here is the result of what I am getting from ajax to form

PSA-10000
BLACK & DECKER
T-1001(Just my unique ID nevermind this)

Here is my javascript code

    <script>
    //Ajax for control number
    function ToolsChange(element) {
    let tools_id = $(element).val();

    if (tools_id) {

        $.ajax({
            type: "post",
            url: "form_JSON_approach.php",
            data: {
                "tools_id": tools_id
            },
            success: function(response) {

                var dataSplit = response;
                console.log(response);
                var shouldSplit = dataSplit.split("@");
                var shouldNotSplit = dataSplit.split();
                console.log(shouldSplit);
                console.log(shouldSplit[0]);
                console.log(shouldSplit[1]);
                console.log(shouldSplit[2]);
                $("#sel_control_num").val(shouldSplit[0]);
                $("#sel_tools_spec").val(shouldSplit[1]);
                $("#sel_tools_id").val(shouldSplit[2]);

            }
        });
    }
  }

And here is my ajax code

<?php 

include("../include/connect.php");


if(isset($_POST['tools_id'])){
    
    $ID = $_POST['tools_id'];
    $query = "SELECT tools_masterlist.control_no, tools_masterlist.tools_id, 
    tools_masterlist.tools_name, 
    tools_spec.model_num,tools_spec.model_num_val, tools_spec.status
    FROM tools_masterlist LEFT JOIN tools_spec ON tools_masterlist.tools_id = 
    tools_spec.tools_id
    LEFT JOIN tools_registration ON tools_masterlist.control_no = 
    tools_registration.reg_input WHERE 
    status = 1 AND tools_name = '$ID'";

    
    // $result=mysqli_query($con, "CALL GetAjaxForToolsRegistration('$ID')");
    $con->next_result();
    $result=mysqli_query($con, $query);
    if(mysqli_num_rows($result)>0)
    {
        while($row = mysqli_fetch_assoc($result))
        {
            // $explodeData = $row['control_no'] . " " . $row['model_num'] . 
               " " . $row['tools_id'];
            // $pieces = explode(" ", $explodeData);
            // echo $explodeData[0];           
            echo $row['control_no'] . "@" . $row['model_num'] . "@" . 
            $row['tools_id'] ."@";
        }
    }
    else
    {
        // $maxQuery = "SELECT MAX(tools_id) FROM tools_registration";  
    }

}

?>

Answer

You can just add a loop in you success function to concat/join all array values.

So, the function would look something like below.

success: function(response) {
    var dataSplit = response;
    console.log(response);
    var shouldSplit = dataSplit.split("@");
    var shouldNotSplit = dataSplit.split();
    console.log(shouldSplit);
    console.log(shouldSplit[0]);
    console.log(shouldSplit[1]);
    console.log(shouldSplit[2]);
    $("#sel_control_num").val(shouldSplit[0]);
    
    var specs = [];
    for (i=1; i<shouldSplit.length; i+=3){
        specs.push(shouldSplit[i])
    }
    
    $("#sel_tools_spec").val(specs.join(', '));
    
    $("#sel_tools_id").val(shouldSplit[2]);
}