如何将jQuery插件应用于同一页面上的多个div？

Question

I'm working on a jQuery plugin and I need it to work on multiple divs on one page. Basically, I have two menus and when a user clicks on one menu item the background color changes. Right now, the effect is being applied to both menus instead of individually. For example, if I click on item one of menu one the background changes but if I click on item two of menu two, the background of item one menu one is removed while the background of item 2 menu 2 changes.

I need for the menus to be completely separate from each other. Clicking on menu one should not change menu two. Here is how the plugin is set up so far:

(function ($) {
    $.fn.selectBox = function () {
        function get() {
            $('.ms-section-select li').first().addClass('ms-checked');
        }

        function get() {
            $('.ms-section-select li').click(function () {
                $('.ms-section-select li').removeClass('ms-checked');
                $(this).addClass('ms-checked');
            });
        }
        return this.each(get);
    };
})(jQuery);

$('.one').selectBox();
$('.two').selectBox();

Here is a jsfiddle example with all of the code http://jsfiddle.net/977hv/

Answer 1

You can try to apply the change on only the siblings of the selected element Is this what you are trying to do? http://jsfiddle.net/977hv/8/

$(this).siblings('.ms-section-select li').removeClass('ms-checked');

To apply it to the first child

    $('.ms-section-select li:first-child').addClass('ms-checked');

Answer 2

function selectBox () { 

    $('.ms-section-select li').on('click', function(){
        $(this).siblings().removeClass('ms-checked');
        $(this).addClass('ms-checked');

    })
};

selectBox();

this should do the trick - check: http://jsfiddle.net/977hv/6/