jQuery addClass example

Change class name on click in jQuery

HTML

<button id="addQA">Добавить блок</button>
<div id="qa"></div>

JavaScript

var qNum = 0;
    $(document).on('click', '#addQA', function(){
    	qNum++;
      addQA(qNum);
    });
   

    //Это функция добавления нового блока. Думаю, это должно быть понятно.
    function addQA(qNumCopy) {
        //При каждом запуске (при нажатии кнопки "добавить блок"),
        //функция запускается с самого начала.
        //Т.е переменная aNum в этот момент всегда будет равна 0
        var aNum = 0;

        //создается НОВЫЙ html элемент
        var jqQuestion = $(
            "<div class='answers'>" +
                "<div class='answer'>" +
                    "<a href='javascript: return false;' class='create-answer'>"+qNumCopy+" Добавить</a>" +
                "</div>" +
            "</div>"
        );

        //к этому НОВОМУ html элементу подключается событие
        jqQuestion.find('.create-answer').click(function(){
            //а вот в обработчике события и заключается вся магия.

            //Эта функция находится ВНУТРИ базовой функции.
            //Она имеет доступ ко всем переменным, 
            //определенным в базовой функции,
            //и эти переменные не изменяются из-за новых 
            //вызовов базовой функции.
            //Т.е. у этого обработчика СВОЯ переменная aNum, 
            //СВОЙ html элемент и т.д,
            //и именно они будут использованы при клике на 
            //ссылку "Добавить".

            //При последующих вызовах базовой функции всё это 
            //будет создаваться еще раз,
            //не влияя на данные пердыдущих вызовов.
            aNum++;

            var answer = "<div class='answer'>" + qNumCopy + '-' + aNum + "</div>\n";

            $(this).closest('.answers').append(answer);
        });

        $('#qa').append(jqQuestion);
    }