JSFiddle - React, Tailwind, and code Playground

HTML

<select name="cities" multiple="multiple" style="height: 150px">
    <optgroup label="Cities">
                <option value="4" class="opt_1">a</option>
                <option value="6" class="opt_2">b</option>
                <option value="7" class="opt_3">c</option>
                <option value="8" class="opt_4">d</option>
                <option value="9" class="opt_5">e</option>
    </optgroup>
</select>
<a href="javascript:void(0);" onclick="plus(1)" id="plus" class="btn btn-success">+</a>
            <a href="javascript:void(0);" id="minus" onclick="minus(1)" class="btn btn-warning">-</a>
<select id="1" name="column[1][]" style="width:120px;height:100px;" multiple="multiple"></select>

JavaScript

$('#plus').click(function(){plus(1);});
$('#minus').click(function(){minus(1);});


function plus(id)
{    
    var c = $('select[name=cities] option:selected');
    
    if(c.length > 5)
    {
        alert('You cant select more than 5 cities at onec');
        return false;
    }
    
    var box = $('select#'+ id +' option');
    
    if(box.length == 5)
    {
        alert('This column is full, please remove item to add another');
        return false;
    }
    
    c.each(function(){
        var current = $(this);
        
        $('select#'+ id).append(
            $('<option></option>')
                .attr('value', current.val())
                .attr('class', current.attr('class'))
                .text(current.text())
            );
                
        $(this).remove();
    });
    
    //_selected(id);
    return false;
}

function minus(id)
{
    var c = $('select#'+ id +' option:selected');
    var cities = $('select[name=cities] option');
    var next_item;
    
    var current = null;
    c.each(function(){
       var item = $(this);
       current = parseInt($(this).attr('class').replace(/[^0-9]/g, ''));
       
       cities.each(function(){
           var next = parseInt($(this).attr('class').replace(/[^0-9]/g, ''));
           
           if(next > current)
           {
               next_item = $(this);
               return false;
           }
       });
       
       if(next_item == null)
       {
           $('select[name=cities]').append(
                $('<option></option>')
                    .attr('value', item.val())
                    .attr('class', item.attr('class'))
                    .text(item.text())
           );    
       }
       else
       {
           next_item.before(
                $('<option></option>')
                    .attr('value', item.val())
                    .attr('class', item.attr('class'))
                    .text(item.text())
           );
       }
       
       $(this).remove();
   ...