Is it possible to create an array with html input and capture it in php?

Question

I’m creating something like a calendar and I know it’s possible to use an input as an array. For example, if I need to add more fields with jQuery, use name="Description[]".

In my project I already use this, because I can add several tasks during the day. However, I can also add more days to this programming and, consequently, more inputs as an array. You could use name="Description[][]" and recover these values with php?

<div id="corpo">
<fieldset>
<div class="esc-rot">
    <div class="esc-rot-pad"><h5>Escreva suas tarefas:</h5></div>
</div>  
<form id="add-pub" method="POST" action="insert_rot.php">
    <div id="formulario">
        <div class="head">
            <label for="nome">Nome da lista</label>
            <input type="text" name="nome" placeholder="Digite aqui..." required="">
            <br/>

            <label for="cidade">Local</label>
            <input type="text" name="cidade" placeholder="Cidade" required="">
            <input type="text" name="estado" placeholder="Estado" required="">
            <input type="text" name="pais" placeholder="Pais" required="">

            <div id="total_rot">
                <p><br>Valor total: <span>0 Reais</span></p>
            </div>
        </div>
        <br/>
        
        <hr><br>
            <button type="button" class="btn-toggle" data-element="#corpo1">Minimizar 1º dia</button>
            <br/><br/>
            
            <div class="corpo-form" id="corpo1">
                <h4>Dia 1</h4>
                <label for="data">Data</label>
                <input type="date" name="data[]" required="">
                <br/><br/>

                <div class="descricao_rot" id="1">
                    <label for="descricao">Descrição</label>
                    <input type="text" name="descricao[][]" placeholder="Digite aqui..." required="">

                    <label for="valor">Valor</label>
                    <input type="number" name="valor[][]" placeholder="e aqui..." required="">

                    <label for="hora">Hora</label>
                    <input type="time" name="hora[][]" min="00:00" max="23:59" required="">

                    <button type="button" class="add-campo" id="add-campo-1-0"> + </button>
                </div>
                <div id="total_campo1" class="tot">
                    <br/><h4>Total dia 1: </h4><br>
                </div>
            </div>
    </div>
    <br/><br/>
    <div class="botoes">
        <button type="button" id="add-corpo"> Adicionar mais dias </button>
        <input type="submit" name="PubRot" id="PubRot" value="Publicar">
    </div>
</form>
</fieldset>
</div>

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

<script type="text/javascript">
$(document).ready(function(){
    var cont = 1;
    var btn_apagar = 1;
    $( "#add-corpo" ).click(function() {
        if(cont < 15){
            cont++;
            btn_apagar++;
            $( '<hr><br/><button type="button" class="btn-toggle" data-element="#corpo'+cont+'">Minimizar '+cont+'º dia</button><br>').appendTo("#formulario");
            $( '<div class="corpo-form" id="corpo'+cont+'"></div><br/>' ).appendTo( "#formulario" );
                //$( '<button type="button" id="btn-'+btn_apagar+'" class="btn-apagar"> x </button><br/><br/>' ).appendTo( "#corpo"+cont+"");

            $( '<br/><h4>Dia '+cont+'</h4>' ).appendTo( "#corpo"+cont+"");
            $( '<label for="data">Data</label><input type="date" name="data[]" required=""><br/><br/>' ).appendTo( "#corpo"+cont+"");
            $( '<div class="descricao_rot" id="'+cont+'""></div>' ).appendTo( "#corpo"+cont+"");
                $( '<label for="descricao">Descrição </label><input type="text" name="descricao[][]" placeholder="Digite aqui..." required="">' ).appendTo( "#"+cont+"");
                $( '<label for="valor"> Valor </label><input type="number" name="valor[][]" placeholder="e aqui..." required="">' ).appendTo( "#"+cont+"");
                $( '<label for="hora"> Hora </label><input type="time" name="hora[][]" min="00:00" max="23:59" required="">' ).appendTo( "#"+cont+"");
                $( '<button type="button" class="add-campo" id="add-campo-'+cont+'-0" style="margin-left:0.5%;"> + </button>' ).appendTo( "#"+cont+"");
                $( '<div id="total_campo'+cont+'" class="tot"><br/><h4>Total dia '+cont+': </h4></div>' ).appendTo( "#corpo"+cont+"");


        }else{
            alert("Ainda não é possivel adicionar mais dias");
        }
    });

    $("form").on("click", ".btn-toggle", function (e){
        //alert("It is working");
        e.preventDefault();
        el = $(this).data('element');
        $(el).toggle();
    });

    $( "form" ).on( "click", ".btn-apagar-desc", function() {
        var button_id = $( this ).attr("id");
        var result_button_id = button_id.split("-");

        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
        $( '#btn-desc-' +result_button_id[2]+'-'+result_button_id[3]+'' ).remove();
    });

    $("form").on("click", ".add-campo", function () {
        var btn_id_desc = $( this ).attr("id");
        var result_button_id = btn_id_desc.split("-");
        btn_id_desc = result_button_id[2];


        var qtd_input = $("#"+btn_id_desc+" input").length;
        if(qtd_input < 30){ //pode haver duplicação
            $( '<br id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'"/><label for="descricao" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">Descrição </label><input type="text" name="descricao[][]" placeholder="Digite aqui..." required="" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">' ).appendTo( "#"+btn_id_desc+"" );
            $( '<label for="valor" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'"> Valor </label><input type="number" name="valor[][]" placeholder="e aqui..." required="" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">' ).appendTo( "#"+btn_id_desc+"" );
            $( '<label for="hora" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'"> Hora </label><input type="time" name="hora[][]" min="00:00" max="23:59" required="" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'">' ).appendTo( "#"+btn_id_desc+"" );
            $( '<button type="button" id="btn-desc-'+btn_id_desc+'-'+(qtd_input/3)+'" class="btn-apagar-desc" style="margin-left:0.5%; width: 1%;"> - </button> </div>' ).appendTo( "#"+btn_id_desc+"" );
        }else{
            alert("Ainda não é possivel adicionar mais descrições");
        }
    });
});
</script>

When I use var_dump in php, something like a column array always appears, for example: [0] [0], [0] [1], ... [0] [7]

What I expected was something like this, day 1: [0] [0], ... [0] [3]; day 2: [1] [0], ... [1] [3];

Is it possible to use an input as matrix or some other solution? I accept both haha

Thank you! :)