How can I make a previously incremented set of numbers appear below the current numbers in a new line?

I wrote a javascript that increases a set of numbers every second, where every increased set writes on a new line separated by a horizontal rule. E.g;

20220215155

20220215156

20220215157

20220215158 etc…

var i = 20220215155;
    function increment(){
     i++;
        document.getElementById('period').innerHTML += i + "<br />" + "<hr />" ;
    }
    setInterval('increment()', 1000);

But I want every current set of the numbers to always be in the first line, whereby a previously increased set goes below the currently increased set… E.g;

20220215159

20220215158

20220215157

20220215156

20220215155

Please how do I go about this?