PHP validation of form elements created with jquery

Question

Hopefully the title gets the idea across, but basically, I have a php page that contains a couple of select form items that can get expanded via jquery so the user can add more than one item to their order.

<div class="orderSet" id="order1">
<select id="movie1" class="movie" name="movie">
    <option value="" disabled selected>Select movie</option>
    <option value="godfather">The Godfather</option>
            blah...blah....
    <option value="titanic">Titanic</option>
</select><br>
<select id="medium1" class="medium" name="medium">
    <option value="" disabled selected>Select format</option>
    <option value="dvd">Movie on DVD</option>
    <option value="bluray">Movie on BluRay</option>
    <option value="poster">Original movie poster</option>
</select>
</div>

The new div has an id of orderN where N is the number assigned by the jquery code, similarly the same applies for the movie and medium id's. Is there any way to obtain this number so I can create an array of order items? I am fine feeding the number back to the script so the validated page starts with the right number of items.

The script creating these extra divs is

$("#add").click(function () {
    var intId = $("#orderItem div").length + 1;
    var orderSet = $("<div class=\"orderSet\" id=\"order" + intId + "\"/>");
    var movie = $("<select id=\"movie" + intID + "\" class=\"movie\"><option value=\"\" disabled selected>Select movie</option><option value=\"godfather\">The Godfather</option>...more options...<option value=\"titanic\">Titanic</option></select><br>");
    var medium = $("<select id=\"medium" + intID + "\" class=\"medium\"><option value=\"\" disabled selected>Select format</option><option value=\"dvd\">Movie on DVD...more options...</select>");
    var removeButton = $("<input type=\"button\" class=\"remove\" value=\"remove\" />");
    removeButton.click(function () {
        $(this).parent().remove();
    });
    orderSet.append(movie);
    orderSet.append(medium);
    orderSet.append(removeButton);
    $("#orderItem").append(orderSet);
});

Answer 1

First method

Create array var userSelection = new Array() on user addition do

userSelection.push(intId)

on removal do

// Find and remove item from an array
var i = userSelection.indexOf(intId);
if(i != -1) {
    userSelection.splice(i, 1);
}

---

Second way:

You can maintain the user state in sesisonStorage, create array for addition and subtraction or single array whatever you feel is fine and store it in sessionStorage

var addition = new Array();

on add click add orderItem to it

addition.push(intId ) // intId  generated in your code
sessionStorage.setItem('added', addition)

on second addition click

sessionStorage.getItem('added').push(intId)

Then you can send this across the server in the format required, same thing you can do with removal