Function js works only once

Question

I have a page that searches the customer’s data by code and displays it in a table. The problem is that I always need to refresh the page to be able to do a new search, the button only works once. What should I do? Follows my code:

PHP:

$funcao = post('funcao');

if($funcao == 'pesquisa') {
  $codcliente = post('codcliente');

  $codempresa = '';
  $codveiculo = '';


?>

<br><table class="table table-bordered table-hover center-text" name="carrtab" id="carrtab" style="background-color: #ffffff;">
        <thead align="center">
            <tr class="danger">
                <th class="text-center">Codigo Cliente</th>
                <th class="text-center">Cliente</th>
                <th class="text-center">Veículo - Tabela Cliente</th>
                <th class="text-center">Veículo - Tabela Evento</th>
                <th class="text-center">Novo Veículo</th>
            </tr>
        </thead>
<tbody>
<?

$sql = "select cli.codempresa,
               cli.codcliente, 
               cli.nome cliente, 
               ve.codveiculo codveiculo_cliente,
               ve.nome veiculo_cliente,
               veic.codveiculo codveiculo_evento,
               veic.nome veiculo_evento
        from cliente cli
        inner join evento ev on ev.codcliente = cli.codcliente
        inner join veiculo ve on ve.codveiculo = cli.codveiculo
        inner join veiculo veic on veic.codveiculo = ev.codveiculo
        where cli.codcliente=$codcliente;";
$rst = my_query($connR, $sql);

if(!empty($rst)) {
    $codempresa = $rst[0]['codempresa'];

    $sqlve = "select ev.codempresaveiculo, ev.codempresa, ev.codveiculo, ve.nome
          from empresaveiculo ev
          inner join empresa emp on emp.codempresa = ev.codempresa
          inner join veiculo ve on ve.codveiculo = ev.codveiculo
          where ev.codempresa=$codempresa
          and ev.indcadastromanual=1
          order by ve.nome;";
    $rstve = my_query($connR, $sqlve);
    $selectveiculo = getOptionSelect($rstve, 'codveiculo','nome');
    $codveiculo = $rstve[0]['codveiculo'];
    $codveiculo = explode('|',$codveiculo);
    $codveiculo = $codveiculo[0];
    $nomeveiculo = $rstve[0]['nome'];
    $nomeveiculo = explode('|',$nomeveiculo);
    $nomeveiculo = $nomeveiculo[0];

} else {
    echo "<script language='JavaScript'>
                alert('CLIENTE NÃO ENCONTRADO');
                window.location.reload();
          </script>";
}

foreach ($rst as $row) {
?>
    <tr>
        <td align="center"><?=$row['codcliente']?></td>
        <td align="center"><?=$row['cliente']?></td>
        <td align="center"><?=$row['veiculo_cliente']?></td>
        <td align="center"><?=$row['veiculo_evento']?></td>
        <td align="center">
            <select class="form-control" name="codveiculo" id="codveiculo" data-target="" style="width: 250px;"><?=$selectveiculo?></select>
        </td>
    </tr>
    <?
}
?>
</tbody>
</table>

<?
exit;
}

HTML

<div id="formulario" class="container-fluid">
    <div class="row">
        <div class="plRel" id="relpesq">
            <form class="form-inline" method="post" name="formpesq" action="/trocarveiculo.php" id="formpesq" style="margin-bottom: 0.25em; padding-top: 0.25em;">
                <input type="hidden" name="funcao" id="funcao" value="pesquisa" />
                <div class="form-group" style="margin-top: 25px;">
                    <label style="margin-left: 5px;">Código do cliente</label>
                    <input type="text" class="form-control" name="codcliente" placeholder="123456" id="codcliente" style="width: 250px;" onkeypress='return SomenteNumero(event)' />
                    <button type="button" id="botao" name="botao" onclick="javascript:pesquisar();" class="btn btn-default">Buscar</button>
                </div>
                <br>
                <div id="tabela"></div>
            </form>
        </div>
    </div>
</div>

JS:

<script language="javascript">
    function SomenteNumero(e){
        var tecla=(window.event)?event.keyCode:e.which;
        if((tecla>47 && tecla<58)) return true;
        else{
            if (tecla==8 || tecla==0) return true;
            else  return false;
        }
    }

    function pesquisar() {
        event.preventDefault();
        data = $('#formpesq').serialize();
        var jqxhr = $.ajax ({
            url: "/trocarveiculo.php",
            type: "POST",
            timeout:default_timeout,
            data: data
        })
            .done(function(retorno) {
                arr = retorno;
                $("#tabela").replaceWith('<table id="carrtab">' + arr + '</table>');
            })
    }
</script>

Answer 1

Basically your <div id="tabela"></div> is removed with the $("#tabela").replaceWith(). Then after the first request there is no more element with table id. Switch to $("#tabela").html() may solve your problem.