html - How to apply the condition in javascript that row has been filled?

Question

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 in that row i making a dynamic div whose class is "col-md-4" it means there can be atleast 3 divs in a dynamic .... Now no. of divs whose class is col-md-4 depends upon the rows retrieved from database it means everytime when data is retrieved there will be a new row in which a new div will form with only div col-md-4. Now i want there should be 3 divs of class-md-4 should be created then new should be created

    $.ajax({
                url: '../php/admin/upcoming_match.php',
                type: 'post',
                data: {},
                success: function(response) {
                    var n=1;
                    var data = JSON.parse(response);
                    if(data!=''){
                        $.each(data, function(i, item) {
                            var parent= document.getElementsByClassName('carousel')[0];
                            var row1= document.createElement("div");
                            row1.setAttribute("class","row");
                            row1.setAttribute("id","row"+n);
                            parent.appendChild(row1);
                            var child=document.getElementbyId('row'+n);
                            var crow1= document.createElement("div");
                            crow1.setAttribute("class","col-md-4");
                            crow1.setAttribute("id",data[i].id);
                            row1.appendChild(crow1);
                          n++;
                          return n;
                        });

                    }
                }
            });

In this code the new dynamic will have only one child div ... i want should have atleast 3 child divs. For e.g, if we retrieved 4 rows from database then there should a new dynamic row which should have 3 child divs that contain the data of 3 rows then there should be a new row which should 4th child div row but in my present if i retrieve 4 rows then 4 news row class are formed which contain a child div that contain the data of each row retrieved from database

Answer 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>