Change or update checkbox values using user inputs

Question

I am currently working on a WordPress project where I have a webstore made up using WooCommerce, and as a practice project I've decided to make refund system for customers to use, where they can send a "Refund request" for the site admins to either accept or deny.

The refund tab is split into 3 different pages where on the first page the customer confirms his/her order by inputting her Name, PostCode and the order number, on the second page the customer can choose the products they want to order and their quantity by inputting the number, and checking the product's checkbox and the third page is just a confirmation page where the customer can also send a message and then they press the "Send request button". And after the button is pressed the information from the request tab is inserted to a custom table called wp_refundrequests, which is used to show all the requests on the admin page.

My problem is that on the second page, where the customer is supposed to select to amount of certain products they want a refund for, always shows the maximum amount in my code, and I can't wrap my head around on how to make it work so, that it would only take the user inputted amount.

Here is the code for the second page, where the problem is:

<div class="Etusivu">
    <form action="" method="post" style="border:0px solid #ccc">
<legend><b>Product refund</b></legend>
          <div class="step">
        <legend>Step 2/3</legend>
      </div>
      <br />
          <p class="important">Order information</p>
          <br />
          <div class="valitse">

        <p class="important">Choose all of the products you want to refund.</p>
      </div>
        <hr>

        <script>
        //function for making a checkbox to check all checkboxes
        function toggle(source) {
          checkboxes = document.getElementsByName('productinfo[]');
          for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
          }
        }
        </script>
          <input type='checkbox' onClick='toggle(this)' />

        <p class="selectall">Select all products</p>

        <label>The order:</p>
        <br />
        <?php
        //Gets and displays data based on certain variables from the database, connects quantity and product name into one string in
        $order = wc_get_order( $ordernumber );

        foreach ($order->get_items() as $item ){

          $unitprice = $item->get_total() / $item->get_quantity();
  // This is the part that currently gets the quantity value for the next page/the refund request
          echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";
          echo '<p>';
          echo __('Product name: ' ) . $item->get_name() . '<br>';
          if($item->get_quantity() > 1) {
            echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
          }
          else {
          echo __('Quantity: ' ) . $item->get_quantity() . '<br>';
        }
        if ($item->get_quantity() > 1) {

          echo __('Product price: ') . $unitprice . '€' . '<br/>';
        }
          echo __('Products total: ' )  . wc_price($item->get_total()) . '</p>' . '<br/>';
       }
        echo '<p>'. __('Order total: ') . $order->get_total() . '</p>';
        ?>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


        <input type="submit" id='check' value="Next"/>
        <script>
        //Checks if any checkboxes have been checked, if not, displays an error
        function checkBoxCheck() {
          if($('input[name="productinfo[]"]:checked').length) {
            console.log("at least one checked");
            return true;
          }
          else {
            alert("Select at least 1 product.");
            return false;
          }
        }
        //runs the script for checking the checkboxes
        $('#check').on('click', checkBoxCheck);
      </script>
        </label>
          <input type="hidden" name="page" value="2">
    </form>
    <br />
</div>
</body>
</html>
<?php

EDIT: So to make this more clear, the problem here is that I'm making a system that customers can use to return some products, on the page 2/3, that I am currently having problems on, the user can see all the products that his order includes, and all products have their own checkboxes so the user can choose which products they want to refund. Right now when the user chooses a product(s), and presses "next", the chosen information is shown on the next page, 3/3. The values shown on that page are the Product name, product price and the product QUANTITY. However, the QUANTITY is always the same amount as the customer has ordered them, and on the 2/3 page (Where user chooses which products he wants to refund), I want to be able to input how many of some products I want to refund, and have this value on the checkbox array.

Eg. I have bought 5 cables, but I want to return only 2 of them, so I input 2 in to the input field I have.

Answer 1

First, you have to change the following :

      echo "<input type='checkbox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

to

      echo "<input type='checkbox' class='" . $item->get_id() . "checkBox' name='productinfo[]' value='" . " " . $item->get_name() . "  ,  " . $item->get_quantity() . " QTY" . " | " . $item->get_total() ."'>";

And this:

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' > " . "<br/>";
      }

To this:

      if($item->get_quantity() > 1) {
        echo "Quantity: " . "<input type='number' class='" . $item->get_id() . "' name='numberqty' value='" . $item->get_quantity() . "'max='" .$item->get_quantity() . "' min='1' onchange='changeCheckBoxValue(this.className)'> " . "<br/>";
      }

If you don't have a get_id() on item use any unique identifier.

This following piece of the code is responsible for triggering the event that changes the value of the checkbox onchange='changeCheckBoxValue(this.className)

And finally add the following function to your code:

function changeCheckBoxValue(className) {

    var checkBox = document.getElementsByClassName(className + 'checkBox')[0];
    var currentValue = checkBox.value;
    var wantedAmount = document.getElementsByClassName(className)[0].value;
    checkBox.value = currentValue .replace(new RegExp('[0-9]* QTY'),wantedAmount + ' QTY');
}

This will update the value of the checkbox

Good luck