How to make the total correct according the selected checkboxes - PHP

The problem is that the first value of the first items is the only one getting read and the second value is not and then the Total price is not exact as the selected item. We were so confused on what would be causing the incorrect total price and why is the first value is the only one being read even though the second value is flash in the website but not read as it is being increment and used in the function. Here's the code of the said problem:

P.S. Thank you so much in Advance! and God Bless! <3

<script>
                            function totalSum() {
                                var price = document.getElementById("price");
                                var food = document.getElementsByName("foodSelection");
                                var quantity = document.getElementById("quantity");
                                var totalValue = document.getElementsByName("total");
                                var total = 0;
                                var multiply = 0;
                                var sum = 0;
                                for (var i = 0; i < food.length; i++) {
                                    if (food[i].checked) {
                                        // sum = parseInt(food[i].value) + parseInt(price.value);
                                        sum += parseInt(price.value);
                                        multiply = sum * parseInt(quantity.value);
                                        total += multiply;
                                        // total += parseInt(price.value);
                                    }
                                    quantity.value = parseInt(quantity.value);
                                    totalValue[0].value = total.toFixed(2) + "php";
                                }
                                
                            }
        </script>

            <div class = "food-recommendations">
                <h2>Food Recommendations</h2>

                <table class = "food-recommendation-table">
                    
                    <tr>
                        <th colspan ="3" style = "text-align: right;">Name</th>
                        <th>Price</th>
                        <th>Quantity</th>
                        <th>Description</th>
                    </tr>
                <?php

                        $sql = "SELECT * FROM foods";
                        $result = mysqli_query($conn, $sql);
                        
                        // $rows = mysqli_num_rows($result);
                                while($row = mysqli_fetch_assoc($result)) { 
                                    $name = $row['name'];
                                    $descrip = $row['foodDesc'];
                                    $pic = $row['pic'];
                                    $price = $row['price'];
                                    $foodID = $row['foodID'];
                                    $quanty = $row['quantity']; ?>
                                <?php echo '<tr><td valign = "center"><input name = "foodSelection" type="checkbox"  value = "'. $foodID .'"
                                                onclick="totalSum()"></td>
                                            <td><img src = "../admin/foods/img/'. $pic .'" height = "200px" width = "300px" 
                                            style = "border-radius: 30px;"></td>
                                            <td><h3>'. $name . '</h3></td>
                                            <td><p align = "center"><input type = "text" name="price" id = "price"  onblur = "totalSum()" value = "'.$price.'" style = "border:none; background: transparent;" hidden>₱'. $price .'</p></td>
                                            <td><input type="number" name="quantity" id="quantity" min="1" onclick="totalSum()" value = "'.$quanty.'"></td>
                                            <td><p class = "accomp-text">'. $descrip .'</p></td></tr>
                                            ';
                                            ?>
                        
                                <?php }?>
                    <tr>

                        <th colspan = "5" style = "text-align: right;">TOTAL</th>
                        <th><input type="text" name="total" id="total" value="0.00php" onclick = "totalSum()" readonly></th>
                    </tr>
                
                </table>
            </div>