What are the best practices for structuring a PHP form that involves adding and editing multiple invoice items?

When structuring a PHP form that involves adding and editing multiple invoice items, it is important to use dynamic form fields to allow users to add or remove items as needed. One way to achieve this is by using JavaScript to dynamically add input fields for each item. Additionally, each item should be stored as an array in the form data to easily process and manipulate the data on the server side.

<form method="post" action="process.php">
    <div id="items">
        <div class="item">
            <input type="text" name="item_name[]" placeholder="Item Name">
            <input type="number" name="item_quantity[]" placeholder="Quantity">
            <input type="number" name="item_price[]" placeholder="Price">
        </div>
    </div>
    <button type="button" onclick="addItem()">Add Item</button>
    <button type="submit">Submit</button>
</form>

<script>
    function addItem() {
        let newItem = document.createElement('div');
        newItem.className = 'item';
        newItem.innerHTML = `
            <input type="text" name="item_name[]" placeholder="Item Name">
            <input type="number" name="item_quantity[]" placeholder="Quantity">
            <input type="number" name="item_price[]" placeholder="Price">
        `;
        document.getElementById('items').appendChild(newItem);
    }
</script>