Problems with Ajax query

The code of the page that should display the query:

<div id="motorista" style="height: 380px;">
<div class="row" style="margin-bottom: 0;">
        <div class="input-field col s10 ">
            <input placeholder="Busca por CPF" id="cpf" type="text" class="form-control">
        </div>
        <div class="input-field col s2 ">
            <button class="btn-floating btn-large waves-effect waves-light " type="button" id="buscar"><i class="material-icons">search</i></button>
        </div>

    <script>

        function buscar (cpf){
            $.ajax({
                type: 'POST',
                dataType: 'html',
                url: 'componentes/cons_motoca.php' //É onde fica a consulta com o banco
                beforeSend: function(){
                    $("#cons_motoca").html("Segura as pontas");
                },
                data: {cpf: cpf},
                success: function (msg){    
                    $("#cons_motoca").html(msg);
                }
            })
        }

        $('#buscar').click(
            function(){
                buscar($("#cpf").val())
            }
        );

    </script>

</div>
<form name="motorista" action="componentes/cad_motoca.php" method="POST">
    <div class="input-field col s6">
        <input placeholder="Digite o nome do motorista" name="nome" type="text" class="validate">
        <label for="nome">Motorista:</label>
    </div>

    <div class="input-field col s6">
        <select name="disponibilidade" type="text" class="validate">
            <option value="" disabled selected></option>
            <option value="Ativo">Ativo</option>
            <option value="Inativo">Inativo</option>
        </select>
        <label>Disponibilidade</label>
    </div> 

    <div class="input-field col s6">
        <label for="cpf">CPF:</label>
        <input placeholder="Digite o CPF" name="cpf" type="text" class="validate">
    </div>

    <div class="input-field col s6">
        <label for="carro">Carro:</label>
        <input placeholder="Digite o carro" name="carro" type="text" class="validate">
    </div> 

    <div class="input-field col s6">
        <label for="data_nasc">Data de Nascimento:</label>
        <input placeholder="Digite a Data de Nascimento" name="data_nasc" type="text" class="validate">
    </div>

    <div class="input-field col s6">
        <select name="sexo" type="text" class="validate">
            <option value="" disabled selected></option>
            <option value="Masculino">Masculino</option>
            <option value="Feminino">Feminino</option>
        </select>
        <label>Sexo</label>
    </div>
    <div class="row">
        <div class="input-field col s8">
            <input type="submit" class="btn" value="Cadastrar">
        </div>
    </div>
</form>
</div>

<div id="cons_motoca"></div>

The bank query code:

<div>
<?php
    if(isset($_POST['cpf'])){
        echo "<table>";
            echo "<tr>";
                echo "<th>NOME</th>";
                echo "<th>DISPONIBILIDADE</th>";
                echo "<th>CARRO</th>";
                echo "<th>CPF</th>";
                echo "<th>DATA DE NASCIMENTO</th>";
                echo "<th>SEXO</th>";
            echo "</tr>";

            $strcon = mysqli_connect('localhost', 'root', '') or die('Erro ao conectar ao banco de dados');
            mysqli_select_db($strcon, 'uber');
            $sql = "SELECT nome, disponibilidade, carro, cpf, nascimento, sexo FROM tb_motorista WHERE cpf = $_POST[cpf]";
            $resultado = mysqli_query($strcon,$sql) or die("Erro ao retornar dados");

            while ($registro = mysqli_fetch_array($resultado)) {
                $nome = $registro['nome'];
                $disponibilidade = $registro['disponibilidade'];
                $carro = $registro['carro'];
                $cpf = $registro['cpf'];
                $nascimento = $registro['nascimento'];
                $sexo = $registro['sexo'];
                echo "<tr>";
                    echo "<td>".$nome."</td>";
                    echo "<td>".$disponibilidade."</td>";
                    echo "<td>".$carro."</td>";
                    echo "<td>".$cpf."</td>";
                    echo "<td>".$nascimento."</td>";
                    echo "<td>".$sexo."</td>";
                echo "</tr>";
            }
            mysqli_close($strcon);
        echo "</table>";
    }else{
        echo 'Digite o número do CPF para consultar';
    }
?>
</div>

My Footer:

</main>

<script src="js/jquery-3.2.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="js/materialize.min.js"></script>

<script type="text/javascript">
    console.log(document);
    $('.carousel.carousel-slider').carousel({fullWidth: true});

    $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15, // Creates a dropdown of 15 years to control year,
        today: 'Today',
        clear: 'Clear',
        close: 'Ok',
        closeOnSelect: false // Close upon selecting a date,
    });

    $('.timepicker').pickatime({
        default: 'now', // Set default time: 'now', '1:30AM', '16:30'
        fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
        twelvehour: false, // Use AM/PM or 24-hour format
        donetext: 'OK', // text for done-button
        cleartext: 'Clear', // text for clear-button
        canceltext: 'Cancel', // Text for cancel-button
        autoclose: false, // automatic close timepicker
        ampmclickable: true, // make AM PM clickable
        aftershow: function(){} //Function for after opening timepicker
    });

    $('.timepicker').pickatime({
        default: 'now', // Set default time: 'now', '1:30AM', '16:30'
        fromnow: 0,       // set default time to * milliseconds from now (using with default = 'now')
        twelvehour: false, // Use AM/PM or 24-hour format
        donetext: 'OK', // text for done-button
        cleartext: 'Clear', // text for clear-button
        canceltext: 'Cancel', // Text for cancel-button
        autoclose: false, // automatic close timepicker
        ampmclickable: true, // make AM PM clickable
        aftershow: function(){} //Function for after opening timepicker
    });

    $(document).ready(function() {
        $('select').material_select();
    });

</script>

</body>
</html>