What do I use instead of two multiselect boxes in html so works on Phone/Ipad

Question

In my HTML UI I wanted users to be able to select multiple countries, because there are far too many countries to allow the complete list to be displayed I initiate the HTML page so it has two lists: The second list has just those that have been selected, the first contain all countries (except ones already selected and add to the 2nd list), the user transfer between these two lists using an Add and Remove button

I display 15 rows for each select box by setting size attribute.

<tr>
    <td>
        <select id="preferred_countries_all" size="15" style="width:200px" multiple="multiple">
            <option value=" AF">Afghanistan</option>
            <option value="AX">Åland Islands</option>
            <option value="AL">Albania</option>
            <option value="DZ">Algeria</option>
            <option value="AS">American Samoa</option>
            <option value="AD">Andorra</option>
            <option value="AO">Angola</option>
            <option value="AI">Anguilla</option>
            <option value="AQ">Antarctica</option>
            <option value="AG">Antigua and Barbuda</option>
            <option value="AR">Argentina</option>
            <option value="AM">Armenia</option>
            <option value="AW">Aruba</option>
            <option value="AU">Australia</option>
            <option value="AT">Austria</option>
            <option value="AZ">Azerbaijan</option>
            <option value="BS">Bahamas</option>
            <option value="BH">Bahrain</option>..
        </select>
    </td>
    <td>
        <button style="width:100px" type="button" id="preferred_countries_add" onclick="add_preferred_countries();">
        Add
        </button>
        <br>
        <button style="width:100px" type="button" id="preferred_countries_remove" onclick="remove_preferred_countries();">
        Remove
        </button>
    </td>
    <td>
        <select id="preferred_countries_selected" name="preferred_countries_selected" size="15" style="width:200px" multiple="multiple">
        </select>
    </td>
</tr>

However when I view on an iPad or Phone it only displays one row so you have to click to even see what has already been selected so it no longer works. I can understand why it might do this since space is limited on these devices, and perhaps my use of two select boxes for one option is non-standard but this doesn't work for me as a UI.

What do I use instead of two multiselect boxes in HTM: so works on Android phone or iPad as well as desktop

I had an idea of having one select box that the user could select additional countries, and a disabled text field that shows what has already been selected which is updated as user selects more countries, but how would they unselect values, what is the standard way to do this ?

Edit This is what I have so far

<tr>
                            <td>
                                <label title="Potential Releases from these countries get their score boosted">
                                    Preferred Release Countries
                                </label>
                            </td>
                            <td>
                                <input disabled="disabled" name="preferredCountries" id="preferredCountries" type="text" value="" class="readonlytextinfo">
                            </td>
                        </tr>
                        <tr>
                            <td class="indentedmultiselect" colspan="2">
                                <select id="preferred_countries_select" name="preferred_countries_select" multiple="multiple" onchange="getSelectValues(preferred_countries_select, preferredCountries)">
                                    <option value=" AF">Afghanistan</option><option value="ZW">Zimbabwe</option>
                                </select>
                            </td>
                        </tr>

<script>
function getSelectValues(select, readonlylist) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.text);
    }
  }
  readonlylist.value =result.toString();
  if(readonlylist.value.length>230)
  {
    readonlylist.value=readonlylist.value.substring(0,230) + '...';
  }
  return result;
}
</script>

Answer 1

How each solution works on mobile you have to test yourself. In the chrome dev tools (f12) you can simulate mobile but in the end nothing beats a real phone. How most mobile jquery components work is by acting on a real select item by hiding it and showing a different DOM, updating the select in the background, thereby making it compatible with forms or other code expecting a select. Some overlay the original to get the proper mobile select response but a different view.