JSFiddle - React, Tailwind, and code Playground

HTML

<form name="sai_frm_incl_patr_seri" method="post">
   <table>
      <tr>
         <td>
            <font face="arial" align="center" valign="middle" color="blue" size="-1">PATRIMÔNIO</font>
            <br>
            <input type="text" name="tx_patr" id="id_patr" maxlength="12" size="12" style="font-size:11; color:Black;" onkeypress="return SomenteNumero(event);" onkeyup="Mascara(this,Patri);" value="">
            <input type="button" onClick="move_patr_seri(this.form.tx_patr,this.form.cb_Patr);limpa_patr();" value=">>">
            <br>
            <select multiple size="7" name="cb_Patr" style="width:300">
            </select>
            <br>
            <input type="button" align="center" valign="middle" onClick="tira(this.form.cb_Patr)" value="<<">
            <br>
         </td>
      </tr>
   </table>
</form>

JavaScript

var Patri = '';
var v_patr = [];
var w_Cont_Qtde = 0;
var w_Qtde_Peri = 4;

// FIX
function SomenteNumero(){ return true;}
function limpa_patr(){return true;}
function Mascara(el, patri){return true;}

//INSERIR
function move_patr_seri(Origem, Destino) {

   var w_valor = Origem.value;
   var w_tipo;
    w_tipo = "S";
      

   if(Origem.name == "tx_patr")
       {
      w_tipo = "P";
       }
       
   if (w_Cont_Qtde <=  w_Qtde_Peri - 1)
       {
      if ((v_patr.indexOf(w_tipo+w_valor) == -1) && (w_valor != ""))
      {
         var opt = document.createElement("option"); 
         opt.text = w_valor ;
         opt.value = w_valor ;
         Destino.options.add(opt);
         //Cria o Vetor
         v_patr[w_Cont_Qtde] = w_tipo + w_valor;            
         w_Cont_Qtde = w_Cont_Qtde + 1;
         if (Origem.name == "tx_patr"){ document.forms['sai_frm_incl_patr_seri'].tx_patr.focus();}
         else { document.forms['sai_frm_incl_patr_seri'].tx_seri.focus();  }     
         Origem.value = '';
         return true;
      }
      else
      {
          alert("Patrimônio OU Serial já existe OU não é válido!");
          Origem.value = '';
         return true;
      }
     }

   else
   if(w_ver == 1){
      alert("Quantidade atingida!");
      if(confirm("Deseja inserir a mesma quantidade para ambos?") == true)
      {
         w_cont = w_Qtde_Peri;
         w_ver = 0;
         w_Qtde_Peri = w_Qtde_Peri + w_Qtde_Peri;
         Origem.value = '';
         return true;
      }
   }
   else
      alert("Quantidade informada ja Incluida !!!");
   return true; 
}

function tira(Destino) {
   var w_letra;
   var w_tira;
   w_letra = "S";
   if (Destino.name == "cb_Patr"){
         w_letra = "P";    
      }
   
   var i;
   for(i = 0; i < Destino.options.length; i++)
   { 
      if (Destino.options[i].selected && Destino.options[i].value != "")
      {
         w_tira = w_letra+Destino.options[i].value;
         
         v_patr.splice(v_patr.indexOf(w_tira), 1);...