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

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

enter image description here

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

enter image description here

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.

enter image description here

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

enter image description here

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

enter image description here

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.

enter image description here

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. enter image description here

My expected output is

enter image description here

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('<div class="clearfix"></div><div class=" custom_fields medication_info" data-id="' + inner(a, 2) + '"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="label" id="unique">ID ' + x + ':</div></div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + inner(a, 2) + '" class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bank two</option><option value="3">Bank three</option></select></div>	</div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><a href="#" class="new_add_bank bankLink" id="' + x + '">Add Bank</a>	<div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank Three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div>  <div class="i-imgset remove_field"><img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
    }
  });

  $(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('<div class="clearfix"></div><div class="  medication_info"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "></div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + c + '-' + inner(innercoutner, 2) + '" class="form-control"></div></div><div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bnak two</option><option value="3">Bank three</option></select></div>	</div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div><div class="i-imgset remove_field"> <img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
    $('.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('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else if (($('.pp_fileStatus').val() == '2')) {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
  } else {
    $(event.target).closest('.row').append('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Time</label><input type="text" name="time[]"  class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');

  }
});
.i-imgset {
  width: 30px;
}

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

.bankLink {
  position: absolute;
  top: -24px;
  font-size: 14px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="click_partner"> <input type="button" name="parner" value="Add Partner"></div>
  <div class="dynamicform">

  </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answers:

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('<div class="clearfix"></div><div class=" custom_fields medication_info" data-id="' + inner(a, 2) + '"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "><div class="label" id="unique">ID ' + x + ':</div></div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + inner(a, 2) + '" class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bank two</option><option value="3">Bank three</option></select></div>	</div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><a href="#" class="new_add_bank bankLink" id="' + x + '">Add Bank</a>	<div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank Three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div>  <div class="i-imgset remove_field"><img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
    }
});

$(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('<div class="clearfix"></div><div class="  medication_info"><div class=" row"><div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 "></div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><input type="text" name="order[]" value="user-10-' + c + '-' + inner(innercoutner, 2) + '" class="form-control"></div></div><div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control fileStatus"><option disabled="" selected>Choose</option> <option value="1">Bank one</option><option value="2">Bnak two</option><option value="3">Bank three</option></select></div>	</div>	<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control"><option disabled="" selected>Choose</option> <option value="">Bank one</option><option value="">Bank two</option><option value="">Bank three</option></select></div> </div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 "><div class="form-group"><select name="parner[]" class="form-control pp_fileStatus"><option disabled="" selected>Status</option> <option value="1">Status one</option><option value="2">Status two</option><option value="3">Status Three</option></select></div></div><div class="i-imgset remove_field"> <img src="http://www.clker.com/cliparts/I/R/h/v/h/g/remove-icon-md.png" alt="remove"> </div></div></div>');
    $('.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]('<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
    } else if ($(this).val() == '2') {
        ele[operation]('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Date</label><input type="text" name="reasonDate[]"  class="form-control datetimepicker"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Remark</label><input type="text" name="remark[]"  class="form-control"></div></div>');
    } else {
        ele[operation]('<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Time</label><input type="text" name="time[]"  class="form-control"></div></div><div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-xs-12 input-wrapper"><div class="form-group"> <label>Reason</label><input type="text" name="reason[]"  class="form-control"></div></div>');
    }
});
.i-imgset {
    width: 30px;
}

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

.bankLink {
    position: absolute;
    top: -24px;
    font-size: 14px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

<div class="container">
    <div class="click_partner"> <input type="button" name="parner" value="Add Partner"></div>
    <div class="dynamicform">

    </div>
</div>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.