JSFiddle - React, Tailwind, and code Playground

HTML

<div id="" class="hidden_row">some code1</div>
<div id="" class="hidden_row">some code2</div>
<div id="" class="hidden_row">some code3</div>

<button onclick="addRow()">Click</button>

CSS

.hidden_row{
 display:none;   
}

JavaScript

function addRow(){
    var hiddenrow = document.getElementsByClassName("hidden_row");
console.log(hiddenrow);
    for(var i=0; i< hiddenrow.length; i++){
        console.log(hiddenrow[i].style);
        var styleDisplay = getStyle(hiddenrow[i], "display");

        if(styleDisplay  == "none"){
            hiddenrow[i].style.display = "block";
            break;
        }
    }
}
function getStyle(el, styleProp)
{
    if (el.currentStyle)
        var y = el.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return y;
}