addClass() jquery problems

Question

$(document).ready(function () {
    var counter = 1;
    var asd = '<div class="class-to-div1">' + '<div class="class-to-div  col-md-2 list">' + '<div class="add-list-item static">' + '<button id="add-div">press here to add div</button>' + '</div>' + '<div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + '<div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + '<div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + ' <div class="list-item placeholder">asdsdaljnfdasdasdf</div>' + '</div>' + '</div>';
    //console.log(asd);
    $('.add-list').click(function () {
        $('.container').append(asd);
        $('class-to-div1').each(function (counter) {
            $(this).addClass('sortable-div-' + counter);
        });
        $('class-to-div').each(function (counter) {
            $(this).addClass('sortable-list-' + counter);
        });
        $('.sortable-div-' + counter).sortable({
            connectWith: '.sortable-div-' + counter,
        });
        $('.sortable-list-' + counter).sortable({
            connectWith: '.sortable-list' + counter - 1,
            fixed: '.static',
            placeholder: "ui-state-highlight"
        });
        $("#sortable").disableSelection();
        $("#add-div" + counter).click(function () {
            var text = prompt("what should be inserted?");
            if (text === null) {
                alert("write something in new div");
            } else {
                $(".sortable-list-" + counter).append('<div class="list-item  placeholder">' + text + '</div>');
            }
        });
        counter++;
    });
});

So this is my code in which i create new divs by pressing button. i wanted to drag them around like its on www.trello.com, but they are not moving. i think that addClass() is not the function i want so what should i do? button works fine, but the least code doesnt

Answer 1

Your selector is incorrect, prefix with ., if you are using Class Selector (“.class”)

 $('.class-to-div1')

instead of

 $('class-to-div1')

You have same issue with $('class-to-div')

i think that addClass() is not the function, Definitely addClass() is a function

EDIT

Also you need to modify you .each(), callback function provide you index as you where passing counter basically it was index

Change it to, remove counter parameter from .each()

    $('.class-to-div1').each(function() {
        $(this).addClass('sortable-div-' + counter);
    });