Pls Advice for Multi select dependent dropdown to display in Select box

Question

The multiselect dependent dropdown code below works perfectly. The issue is that I need this to be displayed in a "Select Option Box," similar to a Pillbox, and when the user clicks on it, it should show a value option in a dropdown from which the user can choose a value from Country and State ..

Need this to be displayed and work like a "Select Option Box," similar to this Example - ( Multiselect → Basic example) Link → https://mdbootstrap.com/docs/standard/extended/multiselect/#example2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-signin" method="post" id="serchform" action="search-profile-result.php?page_id=1">
  <label for="country">Country</label>
  <select class="form-control" id="country" name="country[]" required="required" multiple>
    <option value="USA" label="USA">USA</option>
    <option value="UK" label="UK">UK</option>
    <option value="Canada" label="Canada">Canada</option>
  </select>
  <label for="state">State</label>
  <select id="state" name="state[]" class="form-control" required="required" multiple>
    <option disabled>Select Country First</option>
  </select>
</form>

<script>
$(function() {
  //Populate an Object: { Country: [ States... ] }
  var states = {};
  states['USA'] = new Array('Alabama', 'Alaska', 'Arizona', 'Other');
  states['UK'] = new Array('Aberdeenshire', 'Angus', 'Antrim', 'Other');
  states['Canada'] = new Array('Alberta', 'British-Columbia', 'Manitoba', 'Other');

  $("#country").change(function() {
    // Array Variable to contain all selected
    var selected = [];
    // Iterate all selected items
    $.each($(this).val(), function(i, country) {
      selected = selected.concat(states[country]);
    });
    // Remove previous options
    $("#state > option").remove();
    if (selected.length === 0) {
      // Add placeholder and Stop
      $("#state").append("<option disabled>Select Country First</option>");
      return false;
    }
    selected.sort();
    // Populate Options
    $.each(selected, function(i, state) {
      $("<option>").html(state).appendTo("#state");
    });
  });
});
</script>