Multiple Lines for “Change Dropdown values based o

Question

First of all, thank you very much for supporting me in: Change Dropdown values based on input in textfield

Now I need to extend this feature.

Here is the code for changing the drop down menue based on a text field value (Thank you very much, Rion Williams): https://jsfiddle.net/q5s24th2/

Now I would like to add more persons for which I can also enter the textfield value so that the drop down menu changes its content. Here I have created something to add more people: https://jsfiddle.net/xsnLc48o/

 <p id="maintable">1:
  <input name="Year1" type="text" value="" />
  <select name="Results1">
    <option selected="selected" value="">please choose:</option>
    <option value="300" data-under-18="100" data-over-18="300">300.-</option>
    <option value="500" data-under-18="200" data-over-18="500">500.-</option>
    <option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
    <option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
    <option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
    <option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
  </select>

  <input name="Additional1" type="checkbox" title="Option" value="1" />Option
  </p>
  <p>
    <input type="button" value="+ Add Person" id="addRows" />
  </p>

Unfortunately for the added persons the drop down feature does not work (I have tried several things).

If anybody has an idea how to do it, I would be very happy. Maybe there is a much better possibility than using the addRows/append feature.

Thank you in advance.

Best regards, Andy

Answer 1

You could accomplish this by creating a function that would clone one of your existing rows and append it to content. It may be best to consider using a table to more easily organize your content :

<table id="maintable">
    <tr class='person-row'>
       <td class='person-number'>...</td>
       <td>...</td>
       <td>...</td>
       <td>...</td>
    </tr>
 </table>

And then adjusting your "add rows" function to clone the first row and then store a counter of the number of current users so that you can append that to the name attribute as expected :

// When you add a new user
$("#addRows").click(function(){
        // Determine the next users number
        var nextUser = $('.person-row').length + 1;
        // Clone the first row
        var nextUserRow  = $('#maintable tr:first').clone();
        // Update your attributes
        $(nextUserRow).find('.person-number').text(nextUser + ':');
        $(nextUserRow).find('.person-year').attr('name','Year' + nextUser).val('');
        $(nextUserRow).find('.person-value').attr('name','Results' + nextUser);
        $(nextUserRow).find('.person-additional').attr('name','Additional' + nextUser);
        // Set the defaults for the row
        $(nextUserRow).find('select option:not(:first)').each(function() {
            var valueToUse = $(this).attr('data-over-18');
            $(this).val(valueToUse).text(valueToUse + '.-');
        });
        // Append the row
        $("#maintable").append(nextUserRow);
});

You can see a working example of this in action here and demonstrated below :