How do I remove Ivs and then reinsert them? (using javascript only)

Question

Good I have the following interface:

The idea is: by pressing the left button, for example, the page should display the month before the current one as well as the number of squares relative to the number of days of those months (31 in May, which is being displayed and 30 in April, which should be displayed).

My idea was this: I will remove all the squares and then add them again according to the number of days of the month that should be displayed. For example, the month of May displays 31 squares, when clicking the button on the left should be displayed the month of April, so I must remove the 31 squares and add 30, relative to the number of days of April.

Only, I can even remove the squares, resulting in that:

But when I try to add the squares again I get a white screen:

Before Afterward Note that the page title changes to the file name

Below is the code I’m using (javascript):

function retornaMes() {
    var mes = document.getElementById("barraLateral");
    var ano = document.getElementById("ano");

    var meses = Array('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro')

    var mesAntigo = meses.indexOf(mes.innerHTML);
    var mesNovo = meses[mesAntigo - 1];

    if (mesAntigo - 1 == -1){
        mesNovo = meses[11];

        var novoAno = parseInt(ano.innerHTML);
        novoAno = novoAno - 1;

        ano.removeChild(ano.firstChild);
        var novoAno = document.createTextNode(novoAno.toString());
        ano.appendChild(novoAno);
    } 

    mes.removeChild(mes.firstChild);
    var novoMes = document.createTextNode(mesNovo);
    mes.appendChild(novoMes);

    apagaDias(mesAntigo);
    mesAntigo -= 1;
    geraDias(mesAntigo);
}

Function responsible for going back the month, called on the left button onclick

function avancaMes() {
    var mes = document.getElementById("barraLateral");

    var meses = Array('Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro')

    var mesAntigo = meses.indexOf(mes.innerHTML);
    var mesNovo = meses[mesAntigo + 1];

    if (mesAntigo+ 1 == 12){
        mesNovo = meses[0];

        var novoAno = parseInt(ano.innerHTML);
        novoAno = novoAno + 1;

        ano.removeChild(ano.firstChild);
        var novoAno = document.createTextNode(novoAno.toString());
        ano.appendChild(novoAno);
    }

    mes.removeChild(mes.firstChild);
    var novoMes = document.createTextNode(mesNovo);
    mes.appendChild(novoMes);

    apagaDias(mesAntigo);
    mesAntigo += 1;
    geraDias(mesAntigo);
}

Function responsible for advancing the month, called in the right button onclick

function apagaDias(mes) {
    var dias = document.getElementById('quadradoDeData');
    diasPorMes = Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);

    for (var j = 0; j < diasPorMes[mes]; j++) {
        dias = document.getElementById('quadradoDeData').remove();
    }

    return false;
}

Function responsible for deleting squares

function geraDias(mes) {
    var distanciaX = 0;

    diasPorMes = Array(31, 28, 31, 30, 31, 30, 31, 31,30, 31, 30, 31);

    for (i = 1; i <= diasPorMes[mes]; i++) {

        if (i < 10){
            if (i <= 7) {
                distanciaX = 14 + 90 * (i -1);
                document.write("<div id='quadradoDeData' style='margin: -475px 0px 0px "+distanciaX+"px;'>0"+i+"</div>");
            } else if (i <= 14) {
                distanciaX = 14 + 90 * ((i - 7) - 1);
                document.write("<div id='quadradoDeData' style='margin: -385px 0px 0px "+distanciaX+"px;'>0"+i+"</div>");
            }
        }else{
            if (i <= 14) {
                distanciaX = 14 + 90 * ((i - 7) - 1);
                document.write("<div id='quadradoDeData' style='margin: -385px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }else if (i <= 21){
                distanciaX = 14 + 90 * ((i - 14) - 1);
                document.write("<div id='quadradoDeData' style='margin: -295px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }else if (i <= 28) {
                distanciaX = 14 + 90 * ((i - 21) - 1);
                document.write("<div id='quadradoDeData' style='margin: -205px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }else{
                distanciaX = 14 + 90 * ((i - 28) - 1);
                document.write("<div id='quadradoDeData' style='margin: -115px 0px 0px "+distanciaX+"px;'>"+i+"</div>");
            }

        }
    }
}

Function responsible for replacing the squares

In short, I want to understand why I get this white screen when I try to include the squares again, I hope to have clarified everything.