document.addEventListener('DOMContentLoaded', function() {
    const table = document.querySelector('#preciousuite-mrc-table tbody');
    const addBtn = document.getElementById('add-row');

    if (!table || !addBtn) return;

    addBtn.addEventListener('click', function() {
        const index = table.rows.length;

        const row = `
            <tr>
                <td><input type="text" name="preciousuite_mrc_rates[${index}][name]" required></td>
                <td><input type="number" name="preciousuite_mrc_rates[${index}][price]" required></td>
                <td><button type="button" class="button remove-row">Remove</button></td>
            </tr>`;

        table.insertAdjacentHTML('beforeend', row);
    });

    table.addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-row')) {
            e.target.closest('tr').remove();
        }
    });
});
