在选择框jQuery上动态更改名称属性

Question

I'm trying to dynamically change the "name" attribute on each select box. Here's my scenario: User clicks on first select box option, depending on what the user selected, a new select box appears with the remaining options in it. User can do this up to 4 times - meaning in total, 4 select boxes can be displayed with first select box containing all options, second select box obtaining 1 less option, and so forth. This I have accomplished with some help from others here on stackoverflow. However, aside from all that, I also have this information of what the user selects for each select box phpmailed to my email account and for this to work, I need to use the "name" attribute on each select box. So my question at hand is, how can I get this to work where each select box that appears has its name attribute dynamically changed (ex: name="guest_al-2" where 2 would change to 3 and so forth once a new select box is dynamically created).

Here is what I got so far. DEMO As you will note, if you inspect the result part of it, you can see that it generates the name properly, but that name is produced on all new select options that are created. How can I get that to dynamically change with what I currently have?

JS:

$(document).on('change', '.ad_inquiry_locations', function() {
    $(this).next('select, button').remove();
    var select = $('<select />', {'class' : 'ad_inquiry_locations', value:"", **name:"guest_al-2"**}); // In bold is where I am placing the name attribute for any dynamically created select box
    var option = $('<option />', {text : 'Add a location', disabled : 'disabled'});
    var button = $('<button />', {text : 'Remove Location', click : function() { 
        $(this).prev().remove() 
        if ( $('.ad_inquiry_locations').length == 1 ) $(this).remove();
    }});

    select.append(option, $('option:not(:selected):not(:first)', this).clone(true) );

    $(this).after( select );
    select.after(button);
});

HTML:

<!-- START OF ADDING LOCATIONS -->
<select id="select1" class="ad_inquiry_locations" value="" name="guest_pl" required>

    <option value="" selected disabled>Select primary location</option>
    <option value="Beloit">Beloit</option>
    <option value="Concordia">Concordia</option>
    <option value="Glen-Elder">Glen Elder</option>
    <option value="Jewell">Jewell</option>

</select>
<!-- END OF ADDING LOCATIONS -->

PHP: - (This part is on a separate file that sends these variables to me via email)

$primaryLocation = $_POST['guest_pl'];
$addLocation2 = $_POST['guest_al-2'];
$addLocation3 = $_POST['guest_al-3'];
$addLocation4 = $_POST['guest_al-4'];

Answer 1

On option is by adding var boxNumber = 2; outside as a global and increment it every time a new select is appended. You can seed from any number you want.

    var boxNumber = 2;
    $(document).on('change', '.ad_inquiry_locations', function () {
        $(this).next('select, button').remove();
        var select = $('<select />', {
                'class' : 'ad_inquiry_locations',
                value : "",
                name : "guest_al-" + boxNumber      });
       ....//existing code
       .....
       boxNumber = boxNumber + 1;
        .....
    });


    var button = $('<button />', {
   text: 'Remove Location',
   click: function() {
  $(this).prev().remove()
  if ($('.ad_inquiry_locations').length == 1){ 
  $(this).remove();
  boxNumber = boxNumber-1; //decrements when removed :)
  }
 }
});

Output