jQuery swapsies does not work for multiple moves

i have used jQuery for swapping of cards. i want to let the swapping played untill array having values one by one

i have made function based on array .

how i can overcome this the result should be once the first pair from array got swapped then second pair should start swapping

i also have seen some example of callback function because jquery plugin JQuery Swapsies plugin returning with the callback function once swapping done

HTML

    <div class="Blocks">
            <div class="cards" id="div_1"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_2"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_3"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_4"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_5"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_6"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_7"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_8"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_9"><img src="images/ilogo.png"></div>
    </div>
    <div class="actionbar">
        <a href="javascript://" class="go-swap">Go Swap!</a>
    </div>

CSS

<style>
    .cards {
        width:160px;
        height:200px;
        border:1px solid #00F;
        border-radius:5px;
        float:left;
        margin:5px;
        text-align:center;
        padding:5px;
    }
    .cards img
    {
        width:90%;
        margin-top:10%;
    }
    .Blocks
    {
          display: block;
        width: 550px;
        height: auto;
        float: left;
            clear:both;
    }
    .actionbar
    {
        clear:both;
        float:left;
        width:100%;
    }
</style>

Script

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-swapsies.js" type="text/javascript"></script>

    <script>
    $(document).ready(function() { 

            var swapperarray = [];
            swapperarray[0] = ['div_3', 'div_1'];
            swapperarray[1] = ['div_3', 'div_4'];
            swapperarray[2] = ['div_7', 'div_8'];
            swapperarray[3] = ['div_9', 'div_2'];
            swapperarray[4] = ['div_2', 'div_7'];
            swapperarray[5] = ['div_5', 'div_6'];
            swapperarray[6] = ['div_8', 'div_7'];
            swapperarray[7] = ['div_1', 'div_4'];
            swapperarray[8] = ['div_6', 'div_9'];
            swapperarray[9] = ['div_3', 'div_7'];


            $.each( swapperarray, function( key, value ) {
                 var valuers = value;
                 var arrasssy = valuers.toString().split(",");
                 GoCards(arrasssy[0],arrasssy[1])
            });
    });
    function GoCards(div1,div2)
    {
        //alert("sdv")
        $('#'+div1).swap({  
                    target: div2, // Mandatory. The ID of the element we want to swap with  
                    opacity: "1", // Optional. If set will give the swapping elements a translucent effect while in motion  
                    speed: 1000, // Optional. The time taken in milliseconds for the animation to occur  
                    callback: function() { // Optional. Callback function once the swap is complete  
                    }  
         }); 
    }
</script>

I have used recursive function to dynamically create options for swap check out the link

http://plnkr.co/edit/fmDsGTcmIMy2ppobRD8v?p=preview

// Code goes here
 $(document).ready(function() {

    var swapperarray = [];
    swapperarray[0] = ['div_3', 'div_1'];
    swapperarray[1] = ['div_3', 'div_4'];
    swapperarray[2] = ['div_7', 'div_8'];
    swapperarray[3] = ['div_9', 'div_2'];
    swapperarray[4] = ['div_2', 'div_7'];
    swapperarray[5] = ['div_5', 'div_6'];
    swapperarray[6] = ['div_8', 'div_7'];
    swapperarray[7] = ['div_1', 'div_4'];
    swapperarray[8] = ['div_6', 'div_9'];
    swapperarray[9] = ['div_3', 'div_7'];
    
   $('#'+swapperarray[0][0]).swap(createOptions(swapperarray))

             
});
    
function createOptions(swapperarray){
   var obj = {};
   var pair = swapperarray.shift();
    obj.target = pair[1];
    obj.opacity = "1";
    obj.speed = 1000;
  if(swapperarray.length > 0)
  {
    obj.callback = function (){ /* add class to div here*/ $('#'+swapperarray[0][0]).swap(createOptions(swapperarray)) }
  }
  else 
  {
    obj.callback = function (){ /* add class to div here*/}
  }
  return obj;
}
    

.cards {
        width:160px;
        height:200px;
        border:1px solid #00F;
        border-radius:5px;
        float:left;
        margin:5px;
        text-align:center;
        padding:5px;
    }
    .cards img
    {
        width:90%;
        margin-top:10%;
    }
    .Blocks
    {
          display: block;
        width: 550px;
        height: auto;
        float: left;
            clear:both;
    }
    .actionbar
    {
        clear:both;
        float:left;
        width:100%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>

   
    <div class="Blocks">
      <div class="cards" id="div_1">
        div1
      </div>
      <div class="cards" id="div_2">
        div2
      </div>
      <div class="cards" id="div_3">
        div3
      </div>
      <div class="cards" id="div_4">
        div4
      </div>
      <div class="cards" id="div_5">
        div5
      </div>
      <div class="cards" id="div_6">
        div6
      </div>
      <div class="cards" id="div_7">
        div7
      </div>
      <div class="cards" id="div_8">
        div8
      </div>
      <div class="cards" id="div_9">
        div9
      </div>
    </div>
    <div class="actionbar">
      <a href="javascript://" class="go-swap" >Go Swap!</a>
    </div>