How To Apply The Condition In Javascript That Row Has Been Filled?

Actually I am retrieving some data from database through ajax and on retrieval of data i made some dynamic element in html using javascript. I made dynamic row in a container and i

Solution 1:

What about something like this ?
It would be easier to have demo data. You can upvote or accept if you like that.

var ajax = prompt('Confirm demo or paste AJAX data', '[ {"id":1}, {"id":2}, {"id":3}, {"id":4}, {"id":5}, {"id":6}, {"id":7}, {"id":8}, {"id":9}, {"id":"A"} ]');
display(ajax);
function display(response) {
    var n=1;
    var data = JSON.parse(response);
    if(data.length) {
        for(var i=0;i<data.length;i++) {
            var parent= document.getElementsByClassName('carousel')[0];
            var row1= document.createElement("div");
            row1.setAttribute("class", "row");
            row1.setAttribute("id", "row"+n);
            parent.appendChild(row1);
            var crow1;
            for(var j=0;j<3 && i+j < data.length;j++) {
              crow1 = document.createElement("div");
              crow1.setAttribute("class", "col-md-4");
              crow1.setAttribute("id", data[i+j].id);
              crow1.innerText = "data" + (i+j) + " id" + data[i+j].id;
              row1.appendChild(crow1);
            }
            i += 3-1;
            n++;
        }

    }
}

DIV.col-md-4 {
  display: inline;
  background-color: #FF0080;
  margin: 5px;
}
.row {
  display: block;
  background-color: #80E080;
  padding: 3px;
}

<div class="carousel">
</div>