Create a new select for filter from a 'New Fitro' button

Question

would like to do a dynamic filtering where the can be added and removed a new filter type from a button.

It would be a div with a "dropdonw" and a "remove" button on the select side, and out a "Add" button for a new div with the and remove button.

Then when I click the Add button mounts the div on the screen. then as I click "Add" another div appears as select.

I could not use in the append a div #select, only with the

I want to do it to have a base and then move to Asp MVC

My html is like this:

    <h1>ASP.NET</h1>

    <div class="RecebeFiltros" style="width:600px;">
        <!-- mostra os filtros conforme adicionado -->
    </div>
    <div id="select">
        <select name="select">
            <option value="valor1">Valor 1</option>
            <option value="valor2">Valor 2</option>
            <option value="valor3">Valor 3</option>
        </select>
        <button id="removerLinha">Remover</button>
    </div>

    <button id="criarLinha">nova linha</button>
</div>

<script type="text/javascript" src="~/Scripts/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var divPai = $('.RecebeFiltros');
        var btnCriar = $('#criarLinha');      

        btnCriar.click(function () {
            console.log("clicou");
            divPai.append("<select name='select'><option value='valor1'>Valor 1</option><option value='valor2'>Valor 2</option><option value='valor3'>Valor 3</option></select>");
        });
    });
</script>```