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 eg, 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>