Sumoselect plugin not working with dynamically select dropdown

Question

I am using sumoselect plugin (http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html).

I have two select dropdowns. First, one I directly added to the HTML page and the second one I am displaying dynamically using jQuery.

sumoselect plugin is working only for the first one select dropdown but not working with the second one.

Would you help me out with this issue?

$(document).ready(function() {
  $('.fileStatus').SumoSelect();
  var wrapper = $(".appentInside .row"); //Fields wrapper
  var add_button = $(".click_me"); //Add button ID
  $(add_button).click(function(e) { //on add input button click

    $(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>');
  });

});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">

<select name="pp_fileStatus[]" class="fileStatus">
  <option disabled="" selected="">Select</option>
  <option value="1"> One</option>
  <option value="2"> Two</option>
  <option value="3"> Three</option>
</select>

<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
  <div class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>

After using @Terry answer

$(document).ready(function() {
    $('.fileStatus').SumoSelect();

  $('.fileStatus:first').change(function() {
    var fileStatus = $('.fileStatus option:selected').val();
    $('.fileStatus:last').val(fileStatus);
  })

  var wrapper = $(".appentInside .row"); //Fields wrapper
  var add_button = $(".click_me"); //Add button ID
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    var fileStatus = $('.fileStatus:last option:selected').val();
    $(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>').find('.fileStatus').SumoSelect();
    $('.fileStatus:last').val(fileStatus);
  });

});

Answer 1

That is because your new .fileStatus dropdown is added after runtime, and the code $('.fileStatus').SumoSelect() has already been invoked. It is important to remember that JS is not reactive in the sense that it will automatically find new elements all the time: you will need to instantiate SumoSelect on the new <select> element that is added.

You can simply do this by chaining .find('.fileStatus').SumoSelect() after the .append() method, because by then the new .fileStatus element will be already present in the DOM:

$(document).ready(function() {
  $('.fileStatus').SumoSelect();
  var wrapper = $(".appentInside .row"); //Fields wrapper
  var add_button = $(".click_me"); //Add button ID
  $(add_button).click(function(e) { //on add input button click

    $(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>').find('.fileStatus').SumoSelect();
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">

<select name="pp_fileStatus[]" class="fileStatus">
  <option disabled="" selected="">Select</option>
  <option value="1"> One</option>
  <option value="2"> Two</option>
  <option value="3"> Three</option>
</select>

<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
  <div class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>