Question

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select.
My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:

<option>South KoreaUSAJapan</option>

What I can modify to display the following way if i do a multiple select?:

<option>South Korea</option>
<option>USA</option>
<option>Japan</option>

My code:http://jsbin.com/osesem/4/edit

function addC() {
    if ($("#agregarProvincia option").length < 5) {
        var newC = ($("#countries option:selected").text());
        $("#addCountry").append("<option>" + newC + "</option>");
    }
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
    <select multiple="multiple" size="5" id="countries">
        <option value="1">South Korea</option>
        <option value="2">USA</option>
        <option value="2">Japan</option>
        <option value="3">Italy</option>
        <option value="4">Spain</option>
        <option value="5">Mexico</option>
        <option value="6">England</option>
        <option value="7">Phillipins</option>
        <option value="8">Portugal</option>
        <option value="9">France</option>
        <option value="10">Germany</option>
        <option value="11">Hong Kong</option>
        <option value="12">New Zeland</option>
        <option value="13">Ireland</option>
        <option value="14">Panama</option>
        <option value="15">Norwey</option>
        <option value="16">Sweeden</option>
        <option value="17">India</option>
        <option value="18">Morroco</option>
        <option value="19">Russia</option>
        <option value="20">China</option>
    </select>
</span>
<div class="addremover">
    <input class="add" type="button" onclick="addC()" value="Addd »" />
    <br/>
</div>
<span>
    <select id="addCountry" multiple="multiple" size="5">
    </select>
</span>

Answer 1

use each function to loop through the text and append it..
try this

function addC() {
    if ($("#agregarProvincia option").length < 5) {
        var newC = ($("#countries option:selected"));
      newC.each(function(){
        $("#addCountry").append("<option>" + $(this).text() + "</option>");
      })
    }
}

JSbin here