JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="container">
  <div id="rower">
     <div id="cols">
    </div>
  </div>
</div>

JavaScript

function createTemplate(rows,cols){
    var rows = rows; 
    var col = cols; 


    for(var i = 0; i < rows; i++){
       $("#container").append("<div class = 'row rower'></div>");
    }
    for(var y = 0; y < col; y++){
        $(".rower").append("<div class = 'col-xs-1 cols'> </div>");
    }
    for(var z = 0; z < 1; z++){
        $(".cols").append("<button class = 'btn btn-danger proness'></button>"); 
    }

    var buttons = document.getElementsByClassName("proness");
    for(var l = 0; l < buttons.length; l++){
        buttons[l].innerHTML = l; 
    }


    var row = document.getElementsByClassName("rower"); 
    for(var x = 0; x < row.length;x++)
    {
        row[x].style.padding = "1px"; 
    }  

}; 

createTemplate(2,2);
var buttons = $(".btn");

console.log($(buttons[3]).html());