Skal vise 12 poster men viser kun 1

Hej eksperter jeg har et spørgsmål.
Jeg har lavet et lille stykke javascript kode som henter noget data fra en api.
jeg skal have vist 12 poster. og i min console.log viser den fint 12 poster. men på html siden viser den kun 1 post. og der er den sidste. det er som om den lægger dem oven i hinanden. ved ikke hvordan jeg lige skal få det løst.

Her kommer min kode...

function posts() {
    fetch('https://jsonplaceholder.typicode.com/posts')
        .then(response => response.json())
        .then(json => display12Posts(json))

    function display12Posts(data) {
        var display = document.getElementById("home");
        console.log(data);
        var postLenght = data.length;
        console.log('Array Længde: ' + postLenght);
        var i;

        for (i = 1; i <= 12; i++) {
            console.log('User ID: ' + data[i].userId);
            console.log('Title: ' + data[i].title);
            console.log('Post: ' + data[i].body);

            var txt = '<div class="box" id="post"><div class="box-header"><a href="profile.html/' + data[i].userId + '">' + data[i].title + '</a><button class="btn fa fa-plus" id="show"></button></div><br><p>' + data[i].body + '</p></div>\n\n';

            display.innerHTML = txt;
        }
    }
}

Håber i kan fortælle mig hvad jeg har gjort forkert. Jeg må ikke bruge jquery, det havde jeg startet ud med. Men fik afvide at det måtte jeg ikke bruge.

på forhånd tak for hjælpen...

Delphiuser