Targeting Auto-Generated Fields with Incremented IDs (JavaScript)

Question

I have a starting set of HTML fields with an Add More fields button. The user can add as many sets of fields as desired.

<input id="alpha1" name="alpha1" type="text">
<input id="beta1" name="beta1" type="text" style="display:none;">
<select id="select_box1" name="select_box1">
    <option value="one">one</option>
    <option value="two">two</option>
</select>

The Add More option triggers JS to creatate a new set of fields and increments the id and name by one. Code exerpted to streamline, but I can post all if requested.

// [...]
next = next + 1;
// [...]
var fieldtype_1 = '<input id="alpha' + next + '" name="alpha' + next + '">'
var fieldtype_2 = '<input id="beta' + next + '" name="beta' + next + '" style="display:none;">'
var select_options = `
            <option value="one">one</option>
            <option value="two">two</option>
    `
var fieldtype_3 = '<select id="select_box' + next + '">' + select_options + '</select>'

The beta field needs to show/hide based on user input into a select box.

$(document).ready(function () {
    toggleFields(); 
    $("#select_box1").change(function () {
        toggleFields();
    });
});
function toggleFields() {
    if ($("#select_box1").val() == "two") {
        $("#alpha1").hide();
        $("#beta1").show();
    }
    else {
        $("#alpha1").show();
        $("#beta1").hide();
    }
}

The above code works as intended for my default id(1) set of fields. However, I don't know how to approach targeting all the (unknown number) of additional fields the user could potentially add to this form.

Answer 1

add class activeSelect to every select, you are using. binding the event to the document will allow you to dynamically change the DOM and the event will be binded to every added element

$(document).ready(function () {
    toggleFields(1); 
    $(document).on("change", ".activeSelect", function () {
        toggleFields($(this).attr("id").substr(10));
    });
});
function toggleFields(id) {
    if ($("#select_box"+id).val() == "two") {
        $("#alpha"+id).hide();
        $("#beta"+id).show();
    }
    else {
        $("#alpha"+id).show();
        $("#beta"+id).hide();
    }
}

Answer 2

jsFiddle Use class as single identifier for fields group and wrap the group like this:

<div class="wrapper">
  <input id="alpha1" class="item alpha" name="alpha1" type="text">
  <input id="beta1" class="item beta" name="beta1" type="text" style="display:none;">
  <select id="select_box1" name="select_box1" class="selectClass">
   <option value="one">one</option>
   <option value="two">two</option>
  </select>
</div>

Then toggle all elements of desired class in selected section:

$('.selectClass').on('change', function(){
   var classToShow = $(this).val() == "two" ? "beta" : "alpha";
   $(this).closest('.wrapper').find('.item').hide();
   $(this).closest('.wrapper').find('.' + classToShow).show();
});