Can I use php variable in jquery

Question

In my existing code, I created a new to place the data from CSV file. This works well. What I need to do is remove items from box1 and replace them from this code. I can do this if I was using jquery, but not sure how to link my code with jquery.

Is it possible to use php variable with jquery? You will see in the code that I have tried some js code to loop through var and get the values. However, This only shows 1 item and not all items.

So, in essence I need to remove the <select> and <option> from my existing PHP code and place the items into my existing <select> #box1. Many thanks

    <?php

    if (isset($_FILES['csvfile']) &&
        is_uploaded_file($_FILES['csvfile']['tmp_name']) &&
        $_FILES['csvfile']['size'] > 0) {
        echo "<h3>".
        "File ".$_FILES['filename']['name'].
        " uploaded successfully.".
        "</h3>";
        //get the csv file
        $file = $_FILES['csvfile']['tmp_name'];
        $handle = fopen($file, "r");

        //loop through the csv file
        echo '<select name="box" size="7" multiple="multiple">';
        while (($line = fgetcsv($handle, 1000, ',')) !== false) {
            foreach($line as $cell) {
                $clean = htmlspecialchars($cell);
                echo << < OPTION <
                    option value = "{$clean}" > {
                        $clean
                    } < /option>
                OPTION;
            }
        }
        echo "</select>";
    } else {
        echo 'no reults';
    }

    ?>
<select id="box1">
    <option></option>
</select>

<script>
    var data = <?php echo json_encode($clean); ?>;
    //var len = data.length;
    //console.log(len);

    for (var i=0; i < data.length; i++) {
        console.log(data);
    }
    console.log(data);
</script>

EDIT: Update code based on Alejandro answer

<?php

if (isset($_FILES['csvfile']) && 
    is_uploaded_file($_FILES['csvfile']['tmp_name']) && 
    $_FILES['csvfile']['size'] > 0) {

    //get the csv file
    $file = $_FILES['csvfile']['tmp_name'];
    $handle = fopen($file,"r");

    //loop through the csv file

    //echo '<select name="box" size="7" multiple="multiple">';
        $file_lines = array(); // Global array
    while (($line = fgetcsv($handle, 1000, ',')) !== false) {
            $strings = array();
        foreach($line as $cell) {
            $clean = htmlspecialchars($cell);
            array_push($strings, $cell); // Add the string to the array
//            echo <<< OPTION
//                option value = "{$clean}" > {
//                    $clean
//                } < /option>
//            OPTION;
        }
            array_push($file_lines, $strings); // Add the line data to the global array
    }
    //echo "</select>";
}
else {
    echo 'no reults';
}
?>

<select id="box1">
    <option></option>
</select>

<script>
    var phpString = "<?php echo json_encode($file_lines); ?>";
    var data = JSON.parse(phpString);

    for (var i=0; i < data.length; i++) {
        console.log(data);
    }

</script>

Answer 1

You can, but the PHP output is a string, so you must enclose it in double quotes:

var phpString = "<?php echo json_encode($clean); ?>";

As it is a string, you have to parse it with JSON.parse(), so it becomes a Javascript object/array you can work with:

var data = JSON.parse(phpString);

for ( var i = 0; i < data.length; i++ ) {
    console.log(data);
}

EDIT: $cleanis a string, so there's no need to json_encode() it. I worked the answer as if it was an array, so we'll create one (two actually: one array for the data of each line and another global one that will save the data of the whole file -a.k.a array of arrays-). Add an array just before your echo '<select...>'; and we'll add every string read in the file to it:

//loop through the csv file

    echo '<select name="box" size="7" multiple="multiple">';
    $file_lines = array(); // Global array
    while (($line = fgetcsv($handle, 1000, ',')) !== false) {
        $strings = array(); // Here, create an array for this particular line
        foreach($line as $cell) {
            $clean = htmlspecialchars($cell);
            array_push($strings, $cell); // Add the string to the array
            echo << < OPTION <
                option value = "{$clean}" > {
                    $clean
                } < /option>
            OPTION;
        }
        array_push($file_lines, $strings); // Add the line data to the global array
    }

Then below, instead of var phpString = "<?php echo json_encode($clean); ?>";, you should use:

var phpString = "<?php echo json_encode($file_lines); ?>";

And the rest of the answer should work well.