Not able to select the dropdown value and How do I display the dynamic field after selecting each dropdown?

Question

I have a button called Add partner. When you click on this button then it will display dynamic row something like this.

After displaying the row, I clicked on first select Dropbox and I choose Bank two.

Now notice here, If I clicked on add bank then first select dropdown will autofill display with the value of the first-row select. I mean I selected Bank two then Bank two will be selected.

If I change it from Bank two to Bank three from the first row then it will also change the in the second row of the first select dropdown. For example

This above scenario is working perfectly for me. There is no issue.

Now Let's talk about the issue. If I click on again Add partner button then it will display the new row with a ID number 3. something like this

Now on ID 3, I am not able to change the Bank three from the dropdown. I have to do the above scenario on each ID. This is my first issue.

My second issue is on the status dropdown. Each option has a different field. I mean, If I select Status one then one input field will display. something like this.

Now Every time I have to display the field if the user selects the status. for example. I clicked on add bank and select the status but it's removing the first remark.

My expected output is

Let me know if need more explanation in this. Would you help me out with this issue?

$(document).on('change', '.fileStatus', function() {
  var fileStatus = $('.fileStatus option:selected').val();
  $('.fileStatus').val(fileStatus);
})

$(document).ready(function() {

  // $('.fileStatus').on('change', '.fileStatus', function(){

  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".dynamicform"); //Fields wrapper

  var add_button = $(".click_partner"); //Add button ID

  var x = 1; //initlal text box count
  a = 1;
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment

      a++;
      //$("input[id^=medication_name]").focus();
      $(wrapper).append('
ID ' + x + ':
 
 
 Add Bank 
 
   ');
    }
  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).find('.click_partner').closest('.custom_fields').remove();
    x++;
  });

  $(wrapper).on('click', '.new_add_bank', function() {
    var innercoutner = $(this).closest('.medication_info').find('.medication_info').children('.row').length + 1;
    var c = $(this).closest('.medication_info').attr('data-id');

    var fileStatus = $('.fileStatus:last option:selected').val();
    // alert(fileStatus);

    $(this).closest('.row').append('
 
 
 
 
  ');
    $('.fileStatus:last').val(fileStatus);

  });

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.medication_info').remove();
    x--;
  });

  // increment==============================================
  function inner(k, width, t) {
    t = t || '0';
    k = k + '';
    /* 
        return n.length >= ? n : new Array(w widthidth - n.length + 1).join(z) + n; */
    return k.length >= width ? k : new Array(width - k.length + 1).join(t) + k;
  }

});


$(document).on('change', '.pp_fileStatus', function(event) {
  //alert($(this).val());
  $(".input-wrapper").remove();
  if (($('.pp_fileStatus').val() == '1')) {
    $(event.target).closest('.row').append(' Remark');
  } else if (($('.pp_fileStatus').val() == '2')) {
    $(event.target).closest('.row').append(' Date
 Remark');
  } else {
    $(event.target).closest('.row').append(' Time
 Reason');

  }
});

.i-imgset {
  width: 30px;
}

.i-imgset img {
  width: 100%;
}

.bankLink {
  position: absolute;
  top: -24px;
  font-size: 14px;
}

user_3880585 · Answer

You have two main issues.

The first: Your delegated event on .pp_fileStatus is wrong because you use global selector instead of local selectors. For instance:

$('.pp_fileStatus').val()

instead of:

$(this).val()

The second issue suffers the same issue but for the delegated event on .fileStatus. The new one is:

$(document).on('change', '.fileStatus', function() {
    var fileStatus = $(this).find('option:selected').val();
    $(this).closest('.row').find('.medication_info .fileStatus').val(fileStatus);
})

var max_fields = 20; //maximum input boxes allowed
var wrapper = $(".dynamicform"); //Fields wrapper

var add_button = $(".click_partner"); //Add button ID

var x = 1; //initlal text box count
a = 1;
$(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
        x++; //text box increment

        a++;
        //$("input[id^=medication_name]").focus();
        $(wrapper).append('
ID ' + x + ':
 
 
 Add Bank 
 
   ');
    }
});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).find('.click_partner').closest('.custom_fields').remove();
    x++;
});

$(wrapper).on('click', '.new_add_bank', function() {
    var innercoutner = $(this).closest('.medication_info').find('.medication_info').children('.row').length + 1;
    var c = $(this).closest('.medication_info').attr('data-id');

    var fileStatus = $('.fileStatus:last option:selected').val();
    // alert(fileStatus);

    $(this).closest('.row').append('
 
 
 
 
  ');
    $('.fileStatus:last').val(fileStatus);

});

$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).closest('.medication_info').remove();
    x--;
});

// increment==============================================
function inner(k, width, t) {
    t = t || '0';
    k = k + '';
    /*
     return n.length >= ? n : new Array(w widthidth - n.length + 1).join(z) + n; */
    return k.length >= width ? k : new Array(width - k.length + 1).join(t) + k;
}

$(document).on('change', '.fileStatus', function() {
    var fileStatus = $(this).find('option:selected').val();
    $(this).closest('.row').find('.medication_info .fileStatus').val(fileStatus);
})

$(document).on('change', '.pp_fileStatus', function(event) {
    //alert($(this).val());
    var operation = 'append';
    var ele = $(this).closest('.row');
    if ($(this).closest('.row').find('.medication_info').length != 0) {
        operation = 'after';
        ele = ele.find('.i-imgset:first');
        ele.siblings(".input-wrapper").remove();
    } else {
        ele.find(".input-wrapper").remove();
    }
    if ($(this).val() == '1') {
        ele[operation](' Remark');
    } else if ($(this).val() == '2') {
        ele[operation](' Date
 Remark');
    } else {
        ele[operation](' Time
 Reason');
    }
});

.i-imgset {
    width: 30px;
}

.i-imgset img {
    width: 100%;
}

.bankLink {
    position: absolute;
    top: -24px;
    font-size: 14px;
}

Not able to select the dropdown value and How do I display the dynamic field after selecting each dropdown?

1 Answers