load next xml element on click via ajax and jquery -

i need able cycle through xml file using click function. when page loads want 1 xml element load , using click function load next. kind of content slider loads each 1 when requested. i'm using display tube video title.

here's code...

$(document).ready(function(){  $.ajax({ type: "get",     url: "video.xml",     datatype: "xml",     success: function(xml) {         $(xml).find('video').each(function(){             var title = $(this).find('title').text();             var embed = $(this).find('embed').text();             $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>').appendto('#video_block');         });     } }); }); 

here xml code:

<video> <title>title 1 here</title> <embed>fscjfrh80uy</embed> </video>  <video> <title>title 2 here</title> <embed>fscjfrh80uy</embed> </video> 

many help.

edit

here current code - needed slight couple of tweaks because of errors...

$(document).ready(function(){  var = 0; getvid(); $('#prev').bind('click', function() { i--; getvid(); $('.video').remove()     return false;  }) $('#next').bind('click', function() { i++; getvid(); $('.video').remove() return false;  }) function getvid() { $.ajax({ type: "get",     url: "video.xml",     datatype: "xml",     success: function(xml) {         ovid = $(xml).find('video:eq('+i+')');         var title = ovid.find('title').text();         var embed = ovid.find('embed').text();             $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+'" frameborder="0"></iframe><h2>'+title+'</h2>').appendto('#video_block');     } }); } }); 

it kind of works following problems exist:

• it needs show first xml element default - shows nothing. ***i know have working. put getvid() before click event functions!
• when hit "next" first time starts on 2nd xml element.
• when hit "next" on last element needs go first. tries find next element comes nothing (as nothing exists after last!)

many again!!!!!

var = 0;  $('#prev').bind('click', function() {     i--;     getvid(); } $('#next').bind('click', function() {     i++;     getvid(); } function getvid() {     $.ajax({         type: "get",         url: "video.xml",         datatype: "xml",         success: function(xml) {             ovid = $(xml).find('video:eq('+i+')');             var title = ovid.find('title').text();             var embed = ovid.find('embed').text();             $('#videodiv').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>');         }     }); }); 

this code not directly work it's idea. play , you'll going.

edit

i forgot increase i, that's why click event didn't work!

edit2

if make button id 'prev' , button id 'next' above edited code should work.