JSFiddle - React, Tailwind, and code Playground

by Jader Wagner

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%">
            <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;" 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

$(document).ready(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()}));
});

$('.botao_del').click(function(){
	$(this).parent().children('select').children('option:selected').each(function() {
    	$(this).remove();
    });
});

});