Js implementation of div switching effects on the next one

 
//Under a div
function next() { 
var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div'); 
for (i = 0; i < arr.length-1; i++) { 
if ((arr[i].style.display == "block"||arr[i].style.display == "") && i <= 2) { 
arr[i + 1].style.display = "block"; 
arr[i].style.display = "none"; 
} 
} 
} 
//On a div
function top() { 
var arr = document.getElementById('tdBjzbsx').getElementsByTagName('div'); 
for (i = 0; i < arr.length; i++) { 
if ((arr[i].style.display == "block"||arr[i].style.display == "") && i <= 3) { 
arr[i - 1].style.display = "block"; 
arr[i].style.display = "none"; 
break; 
} 
} 
} 

 
<table> 
<tr> 
<td id="tdBjzbsx"> 
<div id="div1"> 
1 
</div> 
<div id="div2" style="display: none"> 
2 
</div> 
<div id="div3" style="display: none"> 
3 
</div> 
</td> 
<td> 
<input type="button" value=" The previous step " id="syb" name="cz2" onclick="javascript:top()" disabled="true"/></br></br> 
<input type="button" value=" The next step " id="xyb" name="cz3" onclick="javascript:next()"/></br></br> 
</td> 
</tr> 
</table>