jquery, array and dynamically add & delete text input

Question

I have a situation here where I need to be able to add, delete and reset the passenger name list dynamically, with maximum 10 passengers.

Below is the code for html interface:

<div id="add_passenger">
<br>
<input type="button" id="add_pax" name="add_pax" value="Add Passenger Name" />
<input type="button" id="del_pax" name="del_pax" value="Delete Passenger Name" />
<input type="button" id="reset_pax" name="reset_pax" value="Reset Passenger Name" />

I am using jquery for adding, deleting and resetting the passenger list.

Below is my jquery code:

$("#add_pax").click(function() {

var limit = $("div[id^='pax_list']").length;
var p = limit + 1;

if ( p < 11 ) {
    $("#add_passenger").append(addPassenger(p));
} else {
    alert("Limit of " + limit + " Passenger Name reached");
}

$("#edit_pax_num").val(limit+1);
});

    $("#del_pax").click(function() {

    var t = $("div[id^='pax_list']").length;

    $("div[id^='pax_list']").each(function() {
        if ($("input[type=checkbox]",this).is(':checked')) {
            if(t > 0) {
                $(this).remove();
                t--;
            }
        } 
    });
});

$("#reset_pax").click(function() {
    $("div[id^='pax_list']").each(function() {
        $(this).remove();
    });
});


function addPassenger(p) {
    var text = "<div id=\"pax_list" + p + "\"><input type=\"checkbox\">&nbsp;<strong>Passenger Name " + p + ":</strong> " +
        "<input id=\"pax_name" + p + "\" class=\"textbox\" type=\"text\" maxlengt=\"100\" style=\"width:300px;\" name=\"pax_name[]\"><br></div>";

    return text;
};

The problem is every passenger list will be assigned under unique div id called with pax_list then the number. How to add, delete and reset the passenger list with assigning a unique id.

I have a thought where every time the user delete the list based on the checkbox, all exist passenger name will be add to an array, and the entire list will recreated. Then, at the end the passenger name from the array will be put back in to first available input. Therefore, the number will always start from number 1.

The add passenger jquery function will look at the last number, to be able to add more passenger until the limit reached.

How to add the passenger name list into an array?

This is what I am trying to do:

var divPaxList = $("div[id^='pax_list']").length;

    if(divPaxList == 0) {
        alert("There is no Passenger Name listed. Please add Passenger Name.");
    } else {

        $("input[id^='pax_name']").each(function() {

            var paxName = document.getElementsByName("pax_name[]").val;
            var paxArray = $.makeArray(paxName);

            $(paxArray).appendTo("#add_passenger");

        });    
    }

If some one has better solution. Sorry for the long thought, really appreciate your help guys.

Answer 1

This is one way to get an array with values from multiple elements:

var arrayWithFooValues = $('.foo').map(
    function () {
        return $(this).val();
    }
);

Answer 2

This way looks a bit like your version, in that it loops over the elements and adds each value to the array.

var arrayWithFooValues = [];
$("input[id^='pax_name']").each(function () {
    arrayWithFooValues.push(
        $(this).val()
    );
});