Question

Quick overview: 4 columns, each column has it’s own ul.category containing all the categories available, and ul.filter which is where every list-item inside ul.category should go. All of these things should stay inside of that column.

The jquery

$("ul.category li.unselected").click(function() {
    $(this).removeClass("unselected").addClass("selected");
    $("ul.filter").append(this);
});
$("ul.filter li.selected").click(function() {
    $(this).removeClass("selected").addClass("unselected");
    $("ul.category").append(this);
});

And the html, this is just one column but there’s 3 more like this.

<div class="column themes">
    <ul class="filter">
        <!-- here go the clicked list-items -->
    </ul>
    <ul class="category">
        <li class="unselected"></li>
        <li class="unselected"></li>
        <li class="unselected"></li>
    </ul>
</div>

So, what this does right, is it changes the class on the clicked list-item to .selected and succesfully does the css changes as it should. What is does wrong, is instead of adding the list-item I clicked to just the ul.filter in the same column, it adds that list-item to the ul.filter in every column (basically duplicating it). Also, clicking a list-item in ul.filter doesn’t change the class back to .unselected, and doesn’t move it back to ul.category.

In short: Looking for a way to make this work in just the column it needs to work in, and a fix for moving the list-items back.

Answer 1

It’s appending the items to all the columns because you’re not selecting a specific column to append them to. Change the 2 lines of code that do the append to these…

$(this).closest("div.column").find("ul.filter").append(this);

and

$(this).closest("div.column").find("ul.category").append(this);

That does a search upwards from the clicked li and finds the nearest div element with the class .column and does the append there.