Only first element of the array is taken

i have searched of this issue on the internet but i dont find anything similar.

i have an array in php. i passed this array to javascript function to check and disable checkboxes if their values are the same to the ones in the array. however, the function seems to only take the first element of the array to disable only one checkbox.

for example i have 3 elements A11,A10,A9 in my php array. when i passed this array to the js function, it made only the checkbox A11 checked and disabled. Why is that?

below is the code for the array i have in php:

$query = "SELECT reserved FROM et_seats WHERE event_id = '$theatre->id'";
$reserved = mysqli_query($conn,$query) or die(mysqli_error($conn));
$array = array();

while ($row = mysqli_fetch_array($reserved)){
    array_push($array, $row[0]);
}     

and below is the function in javascript that i have:

<script>
    $(function() {
      var reserved = <?php echo '["' . implode('","', $array) . '"]' ?>;
      var seats = document.getElementsByClassName('seats');
      for (var i = 0; i <= seats.length; i++) {
        reserved.map(function(v) {
          if (seats[i].value === v) {
            seats[i].setAttribute("disabled", "true");
            seats[i].setAttribute("checked", "true");
          }
        });
      }
    });

</script>

why does the function only take the first element in the array? where did i do wrong? i suspect it's the line where i change the php array to javascript. but i dont know how else to do it

i have also tried var reserved = <?php echo json_encode($array); ?>; but it still doesn't work

here is a snippet of my html checkboxes. they are actually for a seat plan

<td>
 <input type="checkbox" class="seats" name="selected[]" value="A3">
</td>
<td>
 <input type="checkbox" class="seats" name="selected[]" value="A2">
</td>
<td>
 <input type="checkbox" class="seats" name="selected[]" value="A1">
</td>