Dynamic select inside multifield

Hi,

On country selection, I am populating states through ajax call in select inside multifield. State option is working fine, when we have only one section (or single state in select) inside multifield.

Please find below screenshot for the same.

Issue:

1. Clicking on add new to add second or more state.

2. The click event on select will not work and also will not be able to see the options options too. 

Please found below image for the same.

Below is the code snippet to get country from data source, and on selection of country we are getting states through ajax call.

(function($, $document) {

    "use strict";

     var STATE = "./stateSelect";

     var SELECTBOX = './countrySelect';

     $document.on("dialog-ready", function() {

          $("[name='"+SELECTBOX+"']").next().children().click(function() {

               getStates($(this).attr('data-value'));

          });

          var stateList = [];

          function getStates(countrySelect){

                 var url = "/bin/services/optus/getStateServlet."+countrySelect+".json";

                 $.getJSON(url).done(function(data) {

                     stateList = data;             

                     addStateToSelectBox(stateList.countries)

                 });

          }     

         function addStateToSelectBox( dataSet) {

               var state = new CUI.Select({

                   element: $("[name='" + STATE +"']").closest(".coral-Select")

               });

                _.each(dataSet, function(key, value) {

                     $("<option>").appendTo(state._nativeSelect).val(key.state_name).html(key.state_name);

                });

        }     

});

})($, $(document));

Thanks