JSFiddle - React, Tailwind, and code Playground

by Felipe Eduardo

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;" onkeypress="return SomenteNumero(event);" value="">
            <input type="button" onClick="move(this.form.tx_MenuOrigem,this.form.cb_MenuDestino)" value=">>">
            <br>
            <select multiple size="9" name="cb_MenuDestino" style="width:300"></select>
            <br>
            <input type="button" align="center" valign="middle" onClick="tira(this.form.cb_MenuDestino)" value="<<">
            <br>
        </td>
        <td align="center" valign="middle" width="15%">
            <br>
        </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;" onkeypress="return SomenteNumero(event);" value="">
            <input type="button" onClick="move(this.form.cb_MenuOrigem2,this.form.cb_MenuDestino2)" value=">>">
            <br>
            <select multiple size="9" name="cb_MenuDestino2" id="cb_MenuDestino2" style="width:230"></select>
            <br>
            <input type="button" align="center" valign="middle" onClick="tira(this.form.cb_MenuDestino)" value="<<">
            <br>
        </td>
    </tr>
</table>

JavaScript

function move(MenuOrigem, MenuDestino) {
    var opt = document.createElement("option");

    for (i = 0; i < MenuOrigem.options.length; i++) {
        if (MenuOrigem.options[i].text && MenuOrigem.options[i].value != "") {
            if (w_seq_qtde[MenuOrigem.options[i].value] == 0) alert("sem periférico no estoque!");
            else {
                document.getElementById("cb_MenuDestino").options.add(opt);
                opt.text = MenuOrigem.options[i].text;
                opt.value = MenuOrigem.options[i].value;
                w_seq_qtde[MenuOrigem.options[i].value]--;
            }
        }
    }
}

function tira(MenuDestino) {
    var i;

    for (i = 0; i < MenuDestino.options.length; i++) {
        if (MenuDestino.options[i].selected && MenuDestino.options[i].value != "") {
            valor = MenuDestino.options[i].value;
            MenuDestino.remove(MenuDestino.selectedIndex);
            w_seq_qtde[valor]++;
        }
    }
}