Reference Error: variable not defined

Question

I got a variable called "nthchild" var nthchild = ($(ui.selected).index() + 1); This gives me the nth-child of a list item with the selected class. I even register it on the console, and it works fine. However, when I try to use this variable, but it does not work.

$("section:nth-child(" + nthchild + ")").style.marginTop = "200px";

Therefore, it should provide a margin-top section of 200px. But the console gives me an error

Untrained ReferenceError: nthchild not defined

You can find my code on this codepen

$(function() {
    $("#selectable").selectable();
});

$(function() {
    $("#selectable").selectable({
        selected: function(event, ui) {
            var nthchild = ($(ui.selected).index() + 1);
            console.log(nthchild);
        }
    });
});

$("section:nth-child(" + nthchild + ")").style.marginTop = "200px";

Answer 1

, nthchild , . :nth-child selected, selectable.

, .style.marginTop , jQuery. css() , , addClass(). :

$(function() {
    $("#selectable").selectable();

    $("#selectable").selectable({
        selected: function(event, ui) {
            var nthchild = ($(ui.selected).index() + 1);
            $("section:nth-child(" + nthchild + ")").css('marginTop', '200px');
        }
    });
});