How to store and recall a variable?

When I click on an Item, I am storing a variable url but I have many items, so

HTML

<div class="item">
  <span id="0" class="video" data-vimeoid="http://vimeo.com/XXX"></span>
</div>
<div class="item">
  <span id="1" class="video" data-vimeoid="http://vimeo.com/SSS"></span>
</div>
<div class="item">
  <span id="2" class="video" data-vimeoid="http://vimeo.com/ZZZ"></span>
</div>

JavaScript

$(document).on( 'click', '.item:not(.expanded)', function() {
  $(".item").removeClass("expanded");
  $("this).addClass("expanded");
  var videoSpan =  $(this).find("span.video");
  var url = videoSpan.data("vimeoid");
  if(url){
    var tokens = url.split("/");
    var id = tokens[3];
    var iframe = $('<iframe/>', {
     'frameborder' : 0,
     'class' : 'tide embed-responsive-item',
     'src' : 'http://player.vimeo.com/video/'+ id + '?api=1&player_id=player1 webkitAllowFullScreen  mozallowfullscreen allowFullScreen',
    });
    videoSpan.replaceWith(iframe);
    $(".item:not(.expanded) span.video").empty().html('<span class="video" data-vimeoid="' + url + '"></span>';);
  }
});

This is removing any previous loaded video but the URL variable is what it will be found in the current clicked item while I want to restore the original.