Dynamic Created Button additinal effect

by Akram kamal

HTML

<div class="dropdown-bubble three gradeButtons" style="left: 0px; top: -1px; width: 356px; height: 27px">
    <button id="stepnav-step1" class="btn btn-mini jump-to-link loadpage cls">1</button>
    <button id="AddTab" class="btn btn-mini jump-to-link AddTab" value="">++</button>
</div>

CSS

.quoteGrading {
    background-color:red;
    border:thin maroon solid;
}

JavaScript

var count = 0;

$( "button.AddTab" ).on("click", function () {

    var SessionClass = '111'
    var SessionLesson = '1';

    $(this).before("<button id=\"stepnav-step" + ($('button.loadpage').length + 1) + "\" class=\"btn btn-mini jump-to-link loadpage\" value=\"page3.asp?Lesson=" + SessionLesson + "&course=" + SessionClass + "&page=" + ($('button.loadpage').length + 1) + "\">" + ($('button.loadpage').length + 1) + "</button>&nbsp;");
});


$('.gradeButtons').on("click", "button.loadpage", function() {
    $(this).siblings('.loadpage').removeClass('quoteGrading');
    $(this).toggleClass('quoteGrading');
});