Adding content to dynamically created elements

I create a series of <li> that contain 3 spans. In the last two I aim to insert content after they are created

by Mauricio Sanchez

HTML

<div class="main"></div>
<div class="content-list"><ul class="information"> </ul></div>

CSS

.main{
    width:200px;
    height:200px;
    background-color: red;
    float:left;
}

.content-list {
    float: left;
    width: 300px;
    height: 300px;
    background-color:blue;
}

JavaScript

var $contentHandler = $(".content-list");
var $mainHandler = $(".main");
var $infoHandler = $(".information");
var circleCounter = 1;

$mainHandler.click(function() {
    
    var htmlString = "<li class='" + circleCounter + "'> <span class='circle-color'> var color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div> ; </span> <br> <span class='circle-radius'> This is supposed to change </span> <br> <span class='circle'> This is supposed to change </span> </li>"
    $infoHandler.append(htmlString);
    updateList();    
    circleCounter++;   

});

function updateList() {
	
		var listItems = $('.information').find('li.' + circleCounter);
		
		var len = circleCounter;
		for (var i = 0; i < len; i++) {
			//We create one reference. This makes looking for one element more effective. Unless we need to search for a particular element
			
			var updateStringRadius = "var radius = " + circleCounter + ";";
			var updateStringCircle = "circle (" + circleCounter + " ," + circleCounter + ", radius)";
			//This is the div Item for the particular div of each element
			var divItem = $(listItems[i]);
			var radiusItem = divItem.find("span.circle-radius");
			var circleItem = divItem.find("span.circle");
			radiusItem.text(updateStringRadius);
			circleItem.text(updateStringCircle);
			// divItem.text(updateString);
			
			var $circleRadiusHandler = $(".circle-radius");
			
		}
	}