JSFiddle - React, Tailwind, and code Playground

by Rui Leite

HTML

<table border="1" align="center" height="180">
    <tr>
        <td>
            <font face="arial" align="center" valign="middle" color="blue" size="-1">PATRIMÔNIO</font>
            <br />
            <input type="text" name="tx_MenuOrigem" maxlength="16" 
                   size="16" style="font-size:11; color:Black;" value="" />
            <input type="button" class='botao_add' value=">>" />
            <br />
            <select multiple size="9" name="cb_MenuDestino" style="width:300"></select>
            <br />
            <input type="button" align="center" valign="middle" class='botao_del' value="<<" />
            <br />
        </td>
        <td align="center" valign="middle" width="15%">&nbsp;</td>
        <td>
            <font face="arial" align="center" valign="middle" color="blue" size="-1">SERIAL</font>
            <br />
            <input type="text" name="cb_MenuOrigem2" maxlength="16"
                   size="16" style="font-size:11; color:Black;" value="" />
            <input type="button"  class='botao_add' value=">>" />
            <br />
            <select multiple size="9" name="cb_MenuDestino2" id="cb_MenuDestino2" style="width:230"></select>
            <br />
            <input type="button" align="center" valign="middle" class='botao_del' value="<<" />
            <br />
        </td>
    </tr>
</table>

JavaScript

window.addEventListener("load", function() {
    /*
    $('.botao_add').click(function(){
        $(this).parent().children('select').append($('<option>', {
        value: $(this).parent().children('input:first').val(),
        text: $(this).parent().children('input:first').val()}));
    });
    */
    var botoes_add = document.getElementsByClassName("botao_add");
    for(var i = 0; i < botoes_add.length; i++){
        botoes_add[i].addEventListener("click", function(){
            var selects = this.parentElement.getElementsByTagName("select");
            var input_first = this.parentElement.getElementsByTagName("input")[0];
            for(var j = 0; j < selects.length; j++){
                var novo_option = document.createElement("option");
                novo_option.value = input_first.value;
                novo_option.innerHTML = input_first.value;
                selects[j].appendChild(novo_option);
            }
        });
    }
    /*
    $('.botao_del').click(function(){
        $(this).parent().children('select').children('option:selected').each(function() {
            $(this).remove();
        });
    });
    */
    var botoes_del = document.getElementsByClassName("botao_del");
    for(var i = 0; i < botoes_del.length; i++){
        botoes_del[i].addEventListener("click", function(){
            var selects = this.parentElement.getElementsByTagName("select");
            for(var j = 0; j < selects.length; j++){
                var options = selects[j].getElementsByTagName("option");
                for(var k = 0; k < selects[j].children.length; k++){
                    if(selects[j].children[k].selected) selects[j].removeChild(selects[j].children[k]);
                }
            }
        });
    }
});