Navegação com botões entre mês e ano! | JavaScript: programando na linguagem da web

Olá! Construí esse exemplo baseado em outro, mas estou parado, pois não sei como colocar a navegação entre o botões em prática: se clico no bt da esquerda que esta em ABRIL DE 2017 essa data vai o bt do meio e no lugar desse bt clicado entra MARÇO DE 2017 e respectivamente para os outros botões respeitando a ordem crescente e decrescente, é claro! Segue o exemplo em html abaixo!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<!-- Stylesheets -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.js"
              integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
              crossorigin="anonymous"></script>
<title>Filtro de data (mês e ano)</title>
<script>
    function construirArray(qtdElementos) {
        this.length = qtdElementos
    }
    var arrayMes = new construirArray(12);
    arrayMes[0] = "Janeiro";
    arrayMes[1] = "Fevereiro";
    arrayMes[2] = "Março";
    arrayMes[3] = "Abril";
    arrayMes[4] = "Maio";
    arrayMes[5] = "Junho";
    arrayMes[6] = "Julho";
    arrayMes[7] = "Agosto";
    arrayMes[8] = "Setembro";
    arrayMes[9] = "Outubro";
    arrayMes[10] = "Novembro";
    arrayMes[11] = "Dezembro";

    function getMesExtenso(mes) {
        return this.arrayMes[mes];
    }

    function atualizarData() {

        $('button[id*="filtrarData_"]').click(function() {
            console.log(this.value); 
        });

        dataAtual = new Date();

        mesAnt = getMesExtenso(dataAtual.getMonth() - 1);
        mesIntAnt = dataAtual.getMonth() - 1;
        anoAnt = dataAtual.getFullYear();
        dataIntAnt = mesIntAnt + "" +  anoAnt;

        dataAnt = mesAnt + " de " + anoAnt;
        document.getElementById("dataAnt").innerHTML = dataAnt;
        document.getElementById("filtrarData_Ant").value = dataIntAnt;


        mesPos = getMesExtenso(dataAtual.getMonth() + 1);
        mesIntPos = dataAtual.getMonth() + 1;
        anoPos = dataAtual.getFullYear();
        dataIntPos = mesIntPos + "" +  anoPos;

        dataPos = mesPos + " de " + anoPos;
        document.getElementById("dataPos").innerHTML = dataPos;
        document.getElementById("filtrarData_Pos").value = dataIntPos;


        mesAtu = getMesExtenso(dataAtual.getMonth());
        mesIntAtu = dataAtual.getMonth();
        anoAtu = dataAtual.getFullYear();
        dataIntAtu = mesIntAtu + "" +  anoAtu;

        dataAtual = mesAtu + " de " + anoAtu;
        document.getElementById("dataAtu").innerHTML = dataAtual;
        document.getElementById("filtrarData_Atu").value = dataIntAtu;

    }
</script>
</head>
<body onload="atualizarData()">
   <nav style="width:500px; margin: 0 auto;">
    <ul class="pager">
        <li class="previous">
            <button id="filtrarData_Ant" class="btn btn-default btn-outline pull-left" value="">
                <span aria-hidden="true"><i
                    class="icon wb-chevron-left-mini" aria-hidden="true"></i></span>
                    <span id="dataAnt"></span>
            </button>
        </li>
        <li class="center">
            <button id="filtrarData_Atu" class="btn btn-default btn-direction btn-outline btn-bottom" value="">
                <span aria-hidden="true"></span><span id="dataAtu"></span>
            </button>
        </li>
        <li class="next">
            <button id="filtrarData_Pos" class="btn btn-default btn-outline pull-right" value="">
                <span id="dataPos"></span>
                <span aria-hidden="true"><i    class="icon wb-chevron-right-mini" aria-hidden="true"></i></span>
            </button>
        </li>
    </ul>
   </nav>
</body>
</html>