JSFiddle - React, Tailwind, and code Playground

by SpAm

HTML

<div id="propertyChooser">
    <div class="selectDiv">
        <select id="firstSelect" multiple="multiple" >
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
        </select>
    </div>
    <div>
        <button type="button" id="addEntry">
            Add
        </button>
        <button type="button" id="removeEntry">
            Remove
        </button>
    </div>
    <div class="selectDiv">
        <select id="secondSelect" multiple="multiple">
        </select>
    </div>
</div>

CSS

#propertyChooser div {
    width:100px;
    float:left;
    margin:10px;
    text-align:center;
}

.selectDiv select {
 width:100px;
 height:200px;
}

#addEntry, #removeEntry {
    margin-top:50px;
}

JavaScript

window.onload = function() {
    var $first = $('#firstSelect');
    $first.empty();
    var $select = $('<select></select>');
    $select.attr("multiple", "multiple");
    $select.attr("size", "10");
    for(i=0;i<10;i++)
    {
        var option = $('<option></option>');
        option.html(i);
        $select.append(option);
    }
    $first.append($select);
}


function addEntry
{
    var select = $('firstSelect').get(0);
    for(i=0;i<select.options.length;i++)
    {
        if(select.options[i].selected)
            
    }
}