Creating a div inside a spam

I want to dynamically create <li> that contains several <p> elements, in one of them I want to create a <div>

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 + "'> <p class='circle-color'>  </p> <p class='circle-radius'> </p> <p class='circle'> </p> </li>"
    $infoHandler.append(htmlString);
    $infoHandler.find('li:last p:first').append("var color = <div class='circle-color-input' contentEditable autocorrect='off'> type a color</div>");
    circleCounter++;
    

});