JSFiddle - React, Tailwind, and code Playground

HTML

<div >
<div class="circle" id="id0"></div>
</div>

CSS

.circle {
	position: relative;
	display: inline-block;
    height: auto;
    width:auto;
	border: 3px solid #666666;
	border-radius: 50%;
    padding: 15px;
}

JavaScript

$(document).ready(function(){
    var n=5; //set number of circles
    for(var count = 0; count < n; count++){
        $(".circle#id"+count).append("<div class='circle' id=id"+(count+1)+"></div>");
    };
    $(".circle#id"+n).css({"width":"15px","height":"15px"}); //set initial size
})