JavaScript/Jquery : Multiple input value with multiple id

Well, to me, your hidden inputs are useless : You say that for input text one is a corresponding hidden field id with a defined value. Then you just have to name your input correctly and you know which id or something is correspondant.

If you want to use jQuery (javascript) as you said, then just do something like this :

<form>
    <input type="text" name="qty1" id="qty1" />
    <input type="text" name="qty2" id="qty2" />
    <input type="text" name="qty3" id="qty3" />
    <input type="text" name="qty4" id="qty4" />
    <input type="submit" name='submit' id="submitButton" value="submit"/>
</form>

<script>
    $('document').on('click','#submitButton',function(event){
        event.preventDefault();
        //this prevents the click to submit, as you want to get values by javascript... remove this if you post it with php
        console.log('QTY1 : '+$('#qty1').val()+' - QTY2 : '+$('#qty2').val()+' - QTY3 : '+$('#qty3').val()+' - QTY 4 : '+$('#qty4').val());
        //This is with jQuery, javascript would look like addEventListeneer, and get values like document.getElementById('id').value;
        //then, ajax something if you really want to post your form through javascript, but this is not a good solution...
    });
</script>

Other solution, better to me, would be just to use php and post directly your form...

<?php
    if(isset($_POST['submit'])){
        //then, user has clicked on submit button
        //CONSIDERED THAT YOU HAVE CHECKED IF THE FIELDS ARE NOT EMPTY
        $qty1 = $_POST['qty1'];
        $qty2 = $_POST['qty2'];
        $qty3 = $_POST['qty3'];
        $qty4 = $_POST['qty4'];
        //do your stuff with the posted values...
    }else{
        echo '
            <form method="POST" action="yourPage.php">
                <input type="text" name="qty1" id="qty1" />
                <input type="text" name="qty2" id="qty2" />
                <input type="text" name="qty3" id="qty3" />
                <input type="text" name="qty4" id="qty4" />
                <input type="submit" name="submit" id="submitButton" value="submit"/>
            </form>
        ';
    }
?>

Hope it helps

Your html is perfectly valid, but you're not using the name of the elements to your advantage.

<input type="hidden" name="id1" value="1" /><input type="text" name="qty1" />

This will return:

id1=1&qty1=X

But in the end I think your hidden field is just wasting space. All you seem to need is the quantity field with a proper name.

<input type="text" name="qty1" />
<input type="text" name="qty2" />
...

If you use the same name for the elements it will still give you the desired data, but it might need some parsing to figure out "what is what".

<input type="text" name="qty" />
<input type="text" name="qty" />
... 

This will basically return:

     qty=X,Y   (or qty=X&qty=Y)
item ----0-1

You could wrap each pair of hidden-text inputs in div element, then iterate through these divs and find these two inputs inside each of the div elements. It might look like this:

<form>
  <div id="keyValuePairs">
    <div class="pair">
      <input type="hidden" name="id" value="1" /><input type="text" name="qty" />
    </div>
    <div class="pair">
      <input type="hidden" name="id" value="2" /><input type="text" name="qty" />
    </div>
    <div class="pair">
      <input type="hidden" name="id" value="3" /><input type="text" name="qty" />
    </div>
    <div class="pair">
      <input type="hidden" name="id" value="4" /><input type="text" name="qty" />
    </div>
  </div>
  <input type="submit" id="sendBtn"/>
</form>

Then iterate with Jquery

$("#sendBtn").click(function(){
  var arr = [];
  $("#keyValuePairs .pair").each(function(){
    var val = $(this).find("input[name='id']").val();
    var key = $(this).find("input[name='qty']").text();
    var obj = { val:val, key:key };
    arr.push(obj);
  });
  // some ajax call or any way you want to post data server
});

at the end of iteration, arr should contain objects with val property containing what is in the value property of hidden input, and key property containing what the text present in text inputs.