динамически меняет атрибут имени на поле выбора jquery

Question

Я пытаюсь динамически изменять атрибут «name» в каждом окне выбора. Вот мой сценарий: пользователь нажимает кнопку «первый вариант выбора», в зависимости от того, что выбрал пользователь, появляется новое поле выбора с оставшимися параметрами в нем. Пользователь может сделать это до 4 раз - в общей сложности, могут быть отображены 4 окна выбора с первым полем выбора, содержащим все параметры, второе поле выбора, получающее 1 вариант меньше, и так далее. Это я сделал с некоторой помощью от других здесь, в stackoverflow. Однако, помимо всего прочего, у меня также есть эта информация о том, что пользователь выбирает для каждого окна выбора, переданного в мою учетную запись электронной почты, и чтобы это работало, мне нужно использовать атрибут «имя» в каждом окне выбора. Таким образом, мой вопрос заключается в том, как я могу заставить это работать, когда появляется каждое окно выбора, динамически измененное его имя-атрибут (например: name = "guest_al-2", где 2 изменится на 3 и так далее, как только появится новое поле выбора динамически создается).

Вот что я получил до сих пор. DEMO Как вы заметили, если вы проверите его часть результата, вы увидите, что оно правильно генерирует имя, но это имя создается во всех новых настраиваемых параметрах выбора. Как я могу получить динамическое изменение с тем, что у меня есть?

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: - (Эта часть в отдельном файле, который посылает эти переменные ко мне по электронной почте)

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

Answer 1

В опции есть добавление var boxNumber = 2; снаружи в качестве глобального и увеличивайте его каждый раз, когда добавляется новый select. Вы можете посеять любое количество, которое вы хотите.

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 :) 
    } 
} 
}); 

Выход