The pure JS implementation deletes the dynamically generated elements according to the subscript.

want to achieve an effect
page is empty
Click the + sign plus DIV,
then click on any of these generated div, how to pop up the subscript?
attach my code:

< html lang= "en" >
< head >

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    -sharpcontainer{
        width: 800px;
        height: 500px;
        border: 1px solid -sharpddd;
        margin: 100px auto;
    }
    .square{
        width: 100px;
        height: 100px;
        background: -sharp5B9BD5;
        color: -sharpfff;
        font-size: 20px;
        font-weight: bold;
        margin: 40px 0 0 40px;
        float: left;
        cursor: pointer;
    }
    -sharpbtn1{
        width: 100px;
        height: 100px;
        border: 1px dashed -sharp000;
        font-size: 50px;
        font-weight: bold;
        cursor: pointer;
        line-height: 100px;
        text-align: center;
        margin: 40px 0 0 40px;
        float: left;
    }
    .alert{
        width: 100%;
        height: 100%;
        background: -sharpccc;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
    }
    .alert div{
        width: 600px;
        height: 400px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 3;
        border: 1px solid -sharp000;
        background: -sharpfff;
    }
    .alert input{
        width: 100px;
        
    }
</style>

< / head >
< body >


<div id="container">
    <div id="btn1">+</div>
</div>
<div class="alert" style="display: none">
    <div>
            <input type="text" >
            <button onclick="back()"></button>
            <button onclick="add()"></button>
    </div>
    
</div>
<script type="text/javascript">
    var btn1=document.getElementById("btn1");
    var ct=document.getElementById("container");
    var al=document.getElementsByClassName("alert")[0];
    var res=document.getElementsByTagName("input")[0];
    var sq_arr=[];
    var number=0;
    btn1.onclick=function(){
        if(number>13){
            return
        }else{
            // createSQ();
            al.style.display="block";
        }
        
    }
    
    function add(){
        var sValue=res.value;
        al.style.display="none";
        createSQ(sValue);
    }
    function back(){
        al.style.display="none";
    }

    function createSQ(value){
        
        var ndiv=document.createElement("div");
        ndiv.setAttribute("class","square");
        ndiv.innerHTML=value;
        // ct.insertBefore(ndiv,btn1)
        sq_arr.push(number);
        ct.insertBefore(ndiv,btn1);
        numberPP;
        console.log(sq_arr);
    }

    // div
    var aSq=document.getElementsByClassName("square");
    for(let i=0;i<aSq.length;iPP){
        aSq[i].addEventListener("click",function(){
            console.log("123");
        })
    }

   
    
</script>

< / body >
< / html >

function createSQ(value){ var ndiv=document.createElement('div'); ndiv.setAttribute("class",'square'); ndiv.setAttribute("name",""+ number +""); ndiv.innerHTML=value; sq_arr.push(number); ct.insertBefore(ndiv,btn1); numberPP; ndiv.addEventListener("click",function(){ console.log(ndiv.attributes["name"].value); }) }

// div var aSq = document.getElementsByClassName('square'); for (let i = 0; i < aSq.length; iPP) { aSq[i].addEventListener("click", function () { console.log('123'); }) }