Create Unique Hidden Field IDS from Select Menu options

Question

I have a modal that displays stock information for a specific item that has multiple locations within a warehouse. The user selects the locations and quantities from each menu and clicks confirm, the information from this modal needs to then be imported on a pick list which is printed out.

To do this I was planning to use arrays to transport the data to the pick list.

I have a hidden field for each row, containing the values of the Location and the Qty Picked from there.

Location 1 + Qty 1 = Hidden Field 1

Location 2 + Qty 2 = Hidden Field 2

I now want to be able to put those hidden fields into an array once a button is clicked.

Hidden Field 1 + Hidden Field 2 = Array.

I can create the hidden fields just fine, its when I go to make the final array that contains all the data, it only seems to want to add the newest hidden field to be created into it.

Dialog - Pick Quantity Button (Used to confirm the selections):

//PICK QUANTITY Button
'Pick Quantity': function() {
    
jQuery('.ui-dialog button:nth-child(1)').button('disable');     
    
//Disables the current selection, so that it cannot be editted
$('#AddLocQtyPick'+Picker).prop ('disabled', true); 

//Disables the current selection, so that it cannot be editted
$('#LocationPickerSelect'+ Picker).prop ('disabled', true);  

//Adds Unique Number to the ID of the input fields
Picker++; 

//For Loop that helps to total up the quanities being selected in each picker
total=0;
for (i = 0; i<Picker; i++) {
total= total + $('#AddLocQtyPick'+i).val() * 1.0;
}

//Variable decides max value of pick on appends using previous selection
QtyReqTot= QtyReq - total; 


//"Pick Another location" button is enabled whilst Qty Req has not been met
if (total !== QtyReq){
    jQuery('.ui-dialog button:nth-child(2)').button('enable');
}

//"Pick Quantity", "Pick Another Location" are disabled, whilst "Confirm" button is enabled when total reaches Qty Req
if (total == QtyReq){
    jQuery('.ui-dialog button:nth-child(2)').button('disable');
    jQuery('.ui-dialog button:nth-child(1)').button('disable');
    jQuery('.ui-dialog button:nth-child(3)').button('enable');
}

//Pick Another Location button is disabled if no more locations to pick from
if (length == 1){ 
    jQuery('.ui-dialog button:nth-child(2)').button('disable');
}

if (total !== QtyReq && length == 1){
    jQuery('.ui-dialog button:nth-child(1)').button('disable');
    $(":button:contains('Cancel')").focus();
}



//Create Hidden Field - Location

//for loop that creates the fields

for (i = 0; i<Picker; i++){
HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
var appendHiddenSelection = '<input type="hidden" class="HiddenSelection'+ i +'" value='+HiddenSelection+'>';
$('#AddLocationPicker').append(appendHiddenSelection);  
alert(appendHiddenSelection +'This is SelectionField'+i);

}
},

Confirm Button - Used to Generate the Final Array containing previous arrays:

'Confirm': function() {     

//Reset the length loop
length = undefined;

//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();

//Checks "Multiple Location" icon for existence and adds Pick List button when all hidden.
$('img[id^=icon]:visible').length || $('#ProcessPickList').show();

//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');

//Create Total Array

TotalHiddenArray = [HiddenSelection]

alert (TotalHiddenArray);


$(this).dialog('close');
    
},

I think I need to be able to create unique IDS for the input fields and show how get them to all be added to the array.

Answer 1

You can try replacing

HiddenArray = [appendHiddenQty, appendHiddenLocation]

By

HiddenArray[HiddenArray.length] = [appendHiddenQty, appendHiddenLocation]

This way, instead of overwriting HiddenArray within the loop, you just add [appendHiddenQty, appendHiddenLocation] at the end of HiddenArray.

---

EDIT1:

Replace

HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];

by

HiddenSelection[HiddenSelection.length] = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];

Or, you also can use push :

HiddenSelection.push([$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()]);

Please see this quickly made Fiddle

---

EDIT2:

Ok, so let's try to replace the whole loop by:

var HiddenSelection = new Array;
for (i = 0; i<Picker; i++){
    HiddenSelection = [$('#LocationPickerSelect'+i).val(),$('#AddLocQtyPick'+i).val()];
    var appendHiddenSelection = '<input type="hidden" class="HiddenSelection'+ i +'"     value='+HiddenSelection+'>';
    $('#AddLocationPicker').append(appendHiddenSelection);  
    alert(appendHiddenSelection +'This is SelectionField'+i);

    TotalHiddenArray.push([HiddenSelection]);
}

You just have to remove this from your confirm function :

//Create Total Array
TotalHiddenArray = [HiddenSelection]

You also have to delcare TotalHiddenArray as new array outside any function (at the very top of your JS code for exemple, because I guess you are trying to access TotalHiddenArray from another function than the loop) like this :

var TotalHiddenArray= new Array;

Another Fiddle