How to create div? of multiple different class dynamically by jquery Let the value of class increase by itself.

now I want to click this button and let it create a div,str every time it clicks. It is a tag that I create dynamically. I want to increase the log-1 of class in turn, log-2,log-3. Do you want to cycle around?

$(".waveform-main").on("click",function(e){
           
        var num=1;
           
        var str="<div class="waveform-log log-"+num+"">"+
                     "<div class="tag1">"+num+"</div>"+
                     "<div class="tag2"></div>"+
                     "<span class="line-add"></span>"+
                     "<span class="icon-times"></span>"+
                     "<span class="icon-arrows-h"></span>"+
                 "</div>";
            
           
            
         $("-sharpwaveform-main-div").append(str); 
    });
Sep.16,2021

you don't need a loop, but your num has to be put on the outside, and inside it, it revar num=1; every time, and the num will always be 1

.
var num=1;
$(".waveform-main").on("click",function(e){
           
        
           
        var str="<div class='waveform-log log-"+num+"'>"+
                     "<div class='tag1'>"+num+"</div>"+
                     "<div class='tag2'></div>"+
                     "<span class='line-add'></span>"+
                     "<span class='icon-times'></span>"+
                     "<span class='icon-arrows-h'></span>"+
                 "</div>";
            
           
            
         $("-sharpwaveform-main-div").append(str); 
         numPP;
    });

that num can be placed on the DOM where you bind the event using jQ, for example:

$(".waveform-main").on("click",function(e){
    var num = $('-sharpwaveform-main-div').data('num');
    num = num ? num : 1; //data-

    var str="<div class='waveform-log log-" + num + "'>" +
                "<div class='tag1'>" + num + "</div>" +
                "<div class='tag2'></div>" +
                "<span class='line-add'></span>" +
                "<span class='icon-times'></span>" +
                "<span class='icon-arrows-h'></span>" +
            "</div>";
    $(str).appendTo("-sharpwaveform-main-div");
    
    num+=1;
    $('-sharpwaveform-main-div').data('num', num);
});
Menu