JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parentdiv">
    <div class="childrendiv">1</div>
    <div class="childrendiv">2</div>
    <div class="childrendiv">3</div>
    <div class="childrendiv">4</div>
    <div class="childrendiv">5</div>
    <div class="childrendiv">6</div>  
</div>
<br/>
<input type="button" onclick="addItem()" value="Add" />

CSS

#parentdiv{
    display: table;
    width: 100%;
    margin-top: 20px;
}
.childrendiv{
    display: table-cell;
    width: auto;
    background: #999;
    text-align: center;
    border: 1px solid #fff;
    height: 30px;
    line-height: 30px;
}
body{
    margin: 0;
    padding: 0;
}

JavaScript

function addItem(){
    var parent = document.getElementById('parentdiv'),
        newdiv = document.createElement('div');
    newdiv.className = 'childrendiv';
    newdiv.innerHTML = (parent.getElementsByTagName('div').length + 1)%10;
    parent.appendChild(newdiv);
}