Jquery : Find only one nearest matching element

Question

i am adding form fields dynamically using Below code

   $(document).ready(function () {
        var add_fields = "" +
            "<div class='col-md-3 form-group pull-right'>" +
            "<label>Please select a field type</label>" +
            "<select name='add_fields' class='form-control' id='add_fields'>" +
            "<option value=''>Please Select a value</option>" +
            "<option value='text'>Text Field</option>" +
            "<option value='select'>Select List</option>" +
            "<option value='radio'>Radio Buttons</option>" +
            "<option value='checkboxes'> Checkboxes</option>" +
            "<option value='file'> File Upload</option>" +
            "</select></div>";
             var text_field_append= "" +
            "<div class='row'>" +
                "<div class='col-md-3 '>" +
                    "<div class='form-group'>" +
                        "<label>Add Field Label</label>" +
                        "<input type='text' name='textfield_label' class='form-control'>" +
                    "</div>" +
                    "</div>" +
                 "<div class='col-md-3'> " +
                    "<label></label><input type='text' placeholder='' name='' class='form-control field' disabled >" +

                "</div>" +
            "</div>";
        $('#add_form').on('click',function (e) {
            $('#form_holder').append(add_fields);
            $('#add_fields').on('change',function () {
                 if($(this).val()=='text'){
                   $('#form_holder').append(text_field_append);
                    var nearest_field= $("[name='textfield_label']").closest('.row').find('.field');
                    $("[name='textfield_label']").on('input',function(e){
                        $(nearest_field).attr("placeholder", $(this).val());
                        var field_name =$(this).val().replace(/ /g,"_");
                        $(nearest_field).attr("name", field_name);
                    });
                }
            })
        })
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       
 <div class="col-md-12">
          <h1>Please use Following wizard to generate your form  </h1>
          <p>Click on Add Fields to get started </p>
          <a id="add_form" class="btn btn-primary pull-right">Add Fields</a>
      </div>
<form id="myform">
           <div id="form_holder">

            </div>
       </form>

now upon adding a text field i am selecting nearest added element as below:

var nearest_field= $("[name='textfield_label']").closest('.row').find('.field');

Problem with this is i want only latest added(nearest) element to be selected while it selects all the elements, Can someone please advise how can i fix it

Answer 1

The issue is partly due to the repeated id attributes in the dynamic content, which need to be replaced with common class attributes, and also with the nested event handlers.

To both fix the issue and improve the logic, remove all the HTML from the JS and place it within 'templates' in the HTML. Your JS should ideally contain no HTML at all as it's a violation of the Separation of Concerns principle

From there you can use delegated event handlers, bound at runtime, to handle the events on all dynamic elements. These event handlers can use DOM traversal to relate the 'label' to the relevant 'placeholder'.

Finally, note that the template for the field types uses a pattern whereby the first part of its id matches the value of the option used to append it. This way the code is extensible, and your logic can be simplified.

Try this:

jQuery($ => {
  let $add_form = $('#add_form');
  let $form_holder = $('#form_holder');
  let add_fields = $('#fields').html();
  
  $add_form.on('click', function(e) {
    $form_holder.append(add_fields);
  });
  
  $form_holder.on('change', '.add_fields', e => {
    let fieldHtml = $(`#${e.target.value}_field`).html();
    $form_holder.append(fieldHtml);
  });
  
  $form_holder.on('input', '.text-field-label', e => {
    let $label = $(e.target);
    let labelValue = $label.val();
    let $placeholder = $label.closest('.row').find('.text-field');
    $placeholder.prop({
      placeholder: labelValue,
      name: labelValue,
      value: labelValue.replace(/ /g, '_')
    });
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-md-12">
  <h1>Please use Following wizard to generate your form </h1>
  <p>Click on Add form to get started </p>
  <a id="add_form" class="btn btn-primary pull-right">Add Form</a>
</div>

<form id="myform">
  <div id="form_holder"></div>
</form>

<script type="text/html" id="fields">
  <div class="col-md-3 form-group pull-right"><label>Please select a field type</label>
    <select name="add_fields" class="form-control add_fields">
      <option value="">Please Select a value</option>
      <option value="text">Text Field</option>
      <option value="select">Select List</option>
      <option value="radio">Radio Buttons</option>
      <option value="checkboxes">Checkboxes</option>
      <option value="file">File Upload</option>
    </select>
  </div>
</script>
<script type="text/html" id="text_field">
  <div class="row">
    <div class="col-md-3">
      <div class="form-group">
        <label>Add Field Label</label>
        <input type="text" name="textfield_label" class="form-control text-field-label" />
      </div>
    </div>
    <div class="col-md-3">
      <label></label>
      <input type="text" placeholder="" name="" class="form-control text-field" disabled />
    </div>
  </div>
</script>