Good day,
I've ran into a bit of a problem with my website.
I have a form which pulls a full table from my DB. Beside each record I have an 'Edit' and 'Remove' button (see image 1).
image 1
If I click on the edit button beside record 'Delete me', a modal appears and populates the value of each editable field with the current data available, and I can then edit each value and update the database. This works fine.
The problem I have; when I select one of the records where the 'Name' field is duplicated with a different 'Filling/Size' (for example, if I select 'Filling/Size' 5) it always updates and pre-populates the modal with the data from the first record in the table that shares the same 'Name'. Image 2 shows me clicking the 'Edit' button for record 1-5.
image 2
I've tried creating a foreach loop inside my foreach loop but that just duplicated every record many many times. My code is below. Any input or suggestions would be greatly appreciated.
<div class="card mb-3">
        <div class="card-header">
            <i class="fa fa-table"></i>Items</div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="dataTable" name="dataTable" width="100%" cellspacing="0">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Filling/Size</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Edit/Remove</th>
                    </tr>
                    </thead>
                    <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Filling/Size</th>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Edit/Remove</th>
                    </tr>
                    </tfoot>
                    <tbody>
                    <?php foreach ($result as $i => $row) { ?>
                            <tr>
                                <td><?php echo $row->name; ?></td>
                                <td><?php echo $row->filling; ?></td>
                                <td><?php echo $row->category; ?></td>
                                <td><?php echo $row->description; ?></td>
                                <td><?php echo $row->price; ?></td>
                                <td id="editRemoveButtonsCell">
                                    <button id="editButton" type="button" class="btn btn-outline-success" data-toggle="modal" data-target="#editItemModal<?php echo $row->name;?>">Edit</button>
                                    <button id="removeButton" type="button" class="btn btn-outline-danger" data-toggle="modal" data-target="#removeItemModal<?php echo $row->name;?>">Remove</button></td>
                            </tr>
                            <!-- Delete Modal -->
                            <div class="modal" id="removeItemModal<?php echo $row->name;?>">
                                <div class="modal-dialog">
                                    <form>
                                        <div class="modal-content">
                                            <!-- Modal Header -->
                                            <div class="modal-header">
                                                <h4 class="modal-title">Delete Item <?php echo $row->name?></h4>
                                                <button type="button" class="close" data-dismiss="modal">×</button>
                                            </div>
                                            <!-- Modal body -->
                                            <div class="modal-body">
                                                Are you sure you want to delete item <?php echo $row->name?> <?php echo $row->filling;?>? <b>This cannot be undone!</b>
                                            </div>
                                            <!-- Modal footer -->
                                            <div class="modal-footer">
                                                <input type="hidden" value="<?php echo $row->name;?>" name="deleteItemName" id="deleteItemName">
                                                <input type="hidden" value="<?php echo $row->filling;?>" name="deleteItemFilling" id="deleteItemFilling">
                                                <button type="button" class="btn btn-cancel" data-dismiss="modal">Close</button>
                                                <input type="submit" name="deleteItem" id="deleteItem" value="Delete" class="btn btn-danger" />
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- Edit Modal -->
                            <div class="modal" id="editItemModal<?php echo $row->name;?>" name="editItemModal<?php echo $row->name;?>">
                                <div class="modal-dialog">
                                    <form>
                                        <div class="modal-content">
                                            <!-- Modal Header -->
                                            <div class="modal-header">
                                                <h4 class="modal-title">Edit Item <?php echo $row->name;?></h4>
                                                <button type="button" class="close" data-dismiss="modal">×</button>
                                            </div>
                                            <!-- Modal body -->
                                            <div class="modal-body">
                                                    <div class="form-group">
                                                        <label for="itemNameUpdate">Name</label>
                                                        <input type="text" class="form-control" id="itemNameUpdate" name="itemNameUpdate" placeholder="Enter Item Name" value="<?php echo $row->name;?>">
                                                        <input type="hidden" value="<?php echo $row->name;?>" name="itemNameOriginal" id="itemNameOriginal">
                                                        <input type="hidden" value="<?php echo $row->filling;?>" name="itemFillingOriginal" id="itemFillingOriginal">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="itemFillingUpdate">Filling/Size</label>
                                                        <input type="text" class="form-control" id="itemFillingUpdate" name="itemFillingUpdate" placeholder="Enter Filling/Size" value="<?php echo $row->filling;?>">
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="itemCategoryUpdate">Category</label>
                                                        <select class="form-control" id="itemCategoryUpdate" name="itemCategoryUpdate">
                                                            <?php echo '<option>'.$row->category.'</option>';?>
                                                            <?php foreach($categories as $category) {echo '<option>'.$category->name.'</option>';}?>
                                                        </select>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="itemDescriptionUpdate">Description</label>
                                                        <textarea class="form-control" id="itemDescriptionUpdate" name="itemDescriptionUpdate" rows="3" placeholder="Item description (optional)"><?php echo $row->description;?></textarea>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="itemPriceUpdate">Price</label>
                                                        <input type="text" class="form-control" id="itemPriceUpdate" name="itemPriceUpdate" placeholder="Enter Price" value="<?php echo $row->price;?>">
                                                    </div>
                                            </div>
                                            <!-- Modal footer -->
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-cancel" data-dismiss="modal">Close</button>
                                                <input type="submit" name="editItem" id="editItem" value="Edit" class="btn btn-success" />
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                    <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer small text-muted">Use the navigation bar to the left to edit the menu.</div>
    </div>
</div>


 
     
    