Using Javascript/JQuery, how can I read and analyse HTML form data (multi-dimensional array) created by PHP?

I’m struggling to read and manipulate data from an HTML form in Javascript/Jquery.

Context: I have a sales screen showing multiple products, and I want to loop through them all, analyze their contents, and present some of the data in a shopping cart.

Please forgive my lack of knowledge in JS!!

Consider this HTML code (the complete form has a lot more variables for each product, so I’ve simplified it here):

  <input type='text' name='sales[1][qty]' value='10.5' />
  <input type='text' name='sales[1][price]' value='21' />
  <input type='text' name='sales[1][name]' value='Product A' />
  <input type='hidden' name='sales[1][purchaseid]' value='3530' />
  
  <input type='text' name='sales[2][qty]' value='' />
  <input type='text' name='sales[2][price]' value='' />
  <input type='text' name='sales[2][name]' value='Product B' />
  <input type='hidden' name='sales[2][purchaseid]' value='3531' />
  
  <input type='text' name='sales[3][qty]' value='2' />
  <input type='text' name='sales[3][price]' value='10' />
  <input type='text' name='sales[3][name]' value='Product C' />
  <input type='hidden' name='sales[3][purchaseid]' value='3532' />
  
  <input type='text' name='sales[4][qty]' value='' />
  <input type='text' name='sales[4][price]' value='' />
  <input type='text' name='sales[4][name]' value='Product D' />
  <input type='hidden' name='sales[4][purchaseid]' value='3533' />

When someone clicks the Cart button, I want to loop over all entries in the sales[][] array, and display only products whose ‘qty’ or ‘price’ is not blank. The flow would be something like this:

1. Loop through all sales[][qty] and sales[][price] values. If either is not blank, return the key in sales[].

2. In the HTML code above, only products sales[1] and sales[3] have these values. So I want to return 1 and 3.

3. Read the data from those keys and present it in a HTML table. So for example, as only keys 1 and 3 are not blank, I want to read the values of sales[1][qty], sales[1][price], sales[1][name], sales[1][purchaseid] – and the values of sales[3][qty], sales[3][price], sales[3][name], sales[3][purchaseid].

4. Present them in an HTML table, like below:

    <table>
   <tr>
    <td>ID</td>
    <td>Name</td>
    <td>Quantity</td>
    <td>Price</td>
   </tr>
   <tr>
    <td>3530</td>
    <td>Product A</td>
    <td>10.5</td>
    <td>21</td>
   </tr>
   <tr>
    <td>3532</td>
    <td>Product C</td>
    <td>2</td>
    <td>10</td>
   </tr>
   

I can do this easily in PHP when the form is submitted – but the idea here is to NOT submit the form, meaning JS has to do the job. In PHP I would do it along these lines:

        foreach($_POST['sales'] as $sale) {
        
        $qty = $sale['qty'];
        $price = $sale['price'];
        $name = $sale['name'];
        $purchaseid = $sale['purchaseid'];
        
        if ($qty > 0 || $price > 0) {
            
            $tableRow .= "<tr><td>$purchaseid</td><td>$name</td><td>$qty</td><td>$price</td></tr>";
            
        }
        
    }

I’ve searched and found out how to simply grab names and values from a HTML form by using the below code, but it doesn’t help with my points 2 and 3 above:

    function testCart() {
    
    var str = '';
    var elem = document.getElementById('registerForm').elements;
    
    for(var i = 0; i < elem.length; i++)
    {
                str += "<b>Name:</b>" + elem[i].name + " - ";
                str += "<b>Value:</b>" + elem[i].value + "<br />";
    }
    
    document.getElementById('myCart').innerHTML = str;
    
}

Can someone please give me any pointers on how to proceed with this?

Thank you!