Span text are getting written over same row

Question

<button  id="beth" class="butto buttonn" onclick="beth()" >Bet on Heroes</button>
<div id="results">
<span id="res1"></span>
<span id="res2"></span>

</div>

Up is Code for button and text

    var villains = 500;
var hero = 500;
function beth() {

    he();

    }


function betv() {
    

}
function he() {
    setTimeout(function() { 
    var x = Math.floor((Math.random() * 300) + 1);
    var vhp = villains - x;
    villains=vhp;
    if (villains< 0 ) {
        document.getElementById("res1").innerHTML = "Heroes have won";
        
        document.getElementById("res2").innerHTML = "<br/>Villains have lost to heroes";
        
    } else {

        document.getElementById("res1").innerHTML += "<br/>Heroes have dealt "  + x
                +  " damage on villains.<br/>Villains have "  + vhp
                + " hp left.";

        
                
        
        vok();
    }
    },3000);
}
function vok() {
    setTimeout(function() { 
    var y = Math.floor((Math.random() * 300) + 1);
    var hhp = hero - y;
    hero=hhp;
    if (hero<0) {
        document.getElementById("res2").innerHTML = "<br/>Heroes have " + 0 +" Hp left";
        
        document.getElementById("res1").innerHTML = "<br/>Heroes have lost to villains";
    } else {
        document.getElementById("res2").innerHTML += "<br/>Villains have dealt "
                + y + " damage on Heroes.<br/>Heroes have "  + hhp
                + " hp left.";

        
                
        
he();
    }
    },3000);
}

Here is the code for js its printing text1 newtext2 newtext3 while I want text1 text2 newtext1 newtext2 newnewtext1 newnewtext2.

In simple words I want text like :-
1
2
1
2
1
2
Not as 
1
1
1
2
2
2 

Which is the above code is currently printing how can I do so that it prints as 1, 2,1,2,1,2,1,2 here is the live preview https://embed.plnkr.co/plunk/DMdKY4NFxhJPzI9N