Get animation to play after one another using JQuery

Question

I have lines which are drawn with the Raphaeljs library and each start and end coordinates of the lines drawn are saved in an array and are used for the animation so that the animation moves from the start of the line to the end of the line.

This is working for only one index of the array I specify.

These are the codes for it:

$("#menu_button3").click(function() {
  var start = $("#sldr");
  if (!start.hasClass('started')) {
    start.addClass('started');
    $('#sldr').css({
      "left": startx[1], //line at index 1 in the array
      "top": 160 + starty[1],
      "visibility": "visible"
    });

    $("#sldr").css({
      'display': 'block',
      'transition': 'none',
      'width': '50px'
    }).animate({
        left: endx[1] - 15,
        top: 160 + endy[1]
      }, 2000,
      function() {
        node.attr("stroke", "green");
        start.removeClass('started');
        $('#sldr').css('visibility', 'hidden');
      })
  };
});

I tried using a for loop to iterate through each line but the animation still plays on only the first line.

Any solution for this please?