In this my view diagram of sitting arangement.
VIEW:

                        <div class="card-body">
                            <label class="control-label">Seating Diagram</label>
                            <table id="seatsDiagram2">
                                <tr>
                                    <td id="seat-1" data-name="1">1</td>
                                </tr>
                            <tr>
                                    <td class="space">  </td>
                            </tr>
                            
                                <tr>
                                    <td id="seat-2" data-name="2">2</td>
                                    <td id="seat-3" data-name="3">3</td>
                                    <td class="space">  </td>
                                    <td class="space">  </td>
                                    <td id="seat-4" data-name="4">4</td>
                                    <td id="seat-5" data-name="5">5</td>
                                    <td class="space">  </td>
                                    <td id="seat-6" data-name="6">6</td>
                                    <td id="seat-7" data-name="7">7</td>
                                    <td class="space">  </td>
                                    <td class="space">  </td>
                                    <td id="seat-8" data-name="8">8</td>
                                    <td id="seat-9" data-name="9">9</td>
                                </tr>
                            <tr>
                                    <td class="space"> </td>
                            </tr>
                                <tr>
                                <td id="seat-10" data-name="10">10</td>
                                </tr>
                            </table> 
                        </div>
                    </div> 

This is my script and I don’t know if my script is the reason why is not selecting automatic.

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const sitNumbers = <?php echo json_encode(array_column($sit_numbers, 'pro_sitNumber'));?>;
            const cells = document.querySelectorAll('#seatsDiagram2 td');

            cells.forEach(cell => {
                const name = cell.getAttribute('data-name');
                if (sitNumbers.includes(name)) {
                    cell.classList.add('selected');
                }
            });
        });
</script>

This is CONTROLLER:

    $this->load->model('ProjectModel');
    $data['sit_numbers'] = $this->ProjectModel->get_sit_numbers();
    $this->load->view('project_view', $data);

This is MODEL:

    $sql = "SELECT * FROM `project`";
    $query=$this->db->query($sql);
    $result = $query->result();

Or maybe i have forgot something to put here to show the selected table.
This is the CSS:

#seatsDiagram2 td,
#displaySeats2 td{
    padding: 1rem;
    text-align: center;
    margin: 0.1rem;
    height: 57px;
    width: 60px;
    border: 3px solid transparent;
    display: inline-block;
    background-color: #efefef;
    border-radius: 4px;
    margin-inline-start: 4px;
    cursor: pointer;
}

#displaySeats2{
    margin: 3rem auto 1rem auto;
}

#seatsDiagram2{
    width: 100%;
    margin-bottom: 1rem;
    ;
    border: 1px solid gray;
}

#seatsDiagram2  td.selected{
    background-color: yellowgreen;
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    animation-duration: 300ms;
    animation-fill-mode: both;
}

#seatsDiagram2 td.notAvailable,
#displaySeats2 td.notAvailable
{
    color: white;
    background-color: #db2619;
}

#seatsDiagram2 td:not(.space,.notAvailable):hover{
    cursor: pointer;
    border-color:yellowgreen;
}

#seatsDiagram2 .space,
#displaySeats2 .space{
    background-color: white;
    border: none;
}

enter image description here
This is i want to see(check the image) and this reservation with table seating arrangement, and then sample is the client already reserve with table number and already save in database, if i view her reservation the table selected will show selected in the diagram.