How to move multiple elements back and forth using jquery animate

Question

I have been working on the following code in order to move the div back and forth but there seems to be a problem when the div is toggled, once an item is clicked, it toggles but it affects when the next item is clicked. Any advice as to make this toggle the items back and forth equally and by one step to the left or right only. Here is my fiddle https://jsfiddle.net/z3L8wbt6/

var move = 200;
$('#main div').click(function(){
    $(this).animate({
        left: "+="+move
    }, 200);
    move =-move;
});

Answer 1

Using the jQuery functions addClass , removeClass , and hasClass , I created a simple if/else statement to control each divs movement independently of the other divs.

if ($(this).hasClass("moved")) {
    move = -200;
    $(this).removeClass("moved");
} else {
    move = 200;
    $(this).addClass("moved");
}
$(this).animate({
   left: "+=" + move
}, 200);

JSFiddle