JSFiddle - React, Tailwind, and code Playground

HTML

<div class='parentElement'>
    <div class='myDiv'>
    </div>
    <div class='secondDiv'>
    </div>
</div>
<button class='myButton'>Add A Div</button>

CSS

.myDiv,.secondDiv{
    height : 20px;
    border : 1px solid black;
    margin: 2px;
}

.parentElement{
    border: 1px solid blue;
    padding: 5px;
}

JavaScript

var numChildren = 0;

$('.myButton').on('click', function(){
    
    $('<div class=childDiv' + numChildren + '>Div!</div>')
        .appendTo('.myDiv')
        .css({
            display: 'inline',
            'padding-left': (10 + 10*numChildren) + 'px'
            //I'd like to put something like this padding left class on the parent div.
            //I know the class of all children that should have this style,
            //but I don't know until I create the child.
        });
    
    $('<div class=childDiv' + numChildren + '>Div!</div>')
        .appendTo('.secondDiv')
        .css({
            display: 'inline',
            'padding-left': (10 + 10*numChildren) + 'px'
        });
    
    numChildren++;
    
});