My Ajax update of a php include is bugged

[applytobecome]

Hi i have 4 “Thumbnails”

<img onclick="Ajax();" class="imgshuf" src="Img/shuffle.png" alt="Shuffle" title="Shuffle" height="50" width="50">

<?php
include_once('Includes/videos/randvid.php');
?>

THE INCLUDE FILE

 	<?php
		$db = mysqli_connect('localhost', 'root', '', 'db_videos');
		$data = mysqli_query($db, 'SELECT * FROM videos ORDER BY rand() LIMIT 4');
		$datas_video = array();
		while($row = mysqli_fetch_assoc($data)) {
			$video = array();
			$video['id'] = $row['id'];
			$video['colorid'] = $row['colorid'];
			$video['title'] = $row['title'];
			$video['image'] = $row['image'];
			$video['link'] = $row['link'];
			$video['views'] = $row['views'];
			$video['likes'] = $row['likes'];
			$datas_video[] = $video;
		}
		mysqli_free_result($data);
	?>
    
		<?php
		$i = 0;
		foreach ($datas_video as $key => $video) {
			if($i == 4) {
				$i = 0;
			}
						if($i == 0) {
				echo '<div class="col-lg-12 videowrap">';
			}
			?>
            
                <div id="shuffle">
    <div class="inbo col-sm-6 col-lg-3 col-xs-12 col-md-4">
				<div class="box randvid <?=$video['colorid']?>" data-id="<?=$video['id']?>" data-views="<?=$video['views']?>" data-likes="<?=$video['likes']?>" data-link="<?=$video['link']?>">
					<img src="http://img.youtube.com/vi/<?=$video['link']?>/0.jpg" alt="#"/>
					<span class="caption simple-caption">
						<div class="col-xs-6">
							<h6 class="viewtext"><?=$video['views']?></h6>
							<img src="View.png" class="viewbox" height="30" width="30">
						</div>
						<div class="likewrap col-xs-6">
							<h6 class="liketext"><?=$video['likes']?></h6>
							<img src="Like.png" class="likebox" height="20" width="20">
					</div>
					</span>
				</div>
				<h4 class="vidtext"><?=$video['title']?></h4>
			</div>
            </div>
			<?php
			if($i == 3) {
				echo '</div>';
			}
			$i++;
		}
		?>

THE AJAX

var xmlHttp;
    try{    
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
        try{
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); 
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){
                alert("No AJAX!?");
                return false;
            }
        }
    }

xmlHttp.onreadystatechange=function(){
    if(xmlHttp.readyState==4){
        document.getElementById('shuffle').innerHTML=xmlHttp.responseText;
    }
}
xmlHttp.open("GET","Includes/videos/randvid.php",true);
xmlHttp.send(null);
}

Do anyone spot what is going wrong?
When i click my shuffle button 4 new “Thumbnails” appear but they do not work with my lightbox, also there are added 3 new Thumbnails below the 4 new onces which stay there for as long as i shuffle, if i shuffle again 4 new videos will appear but 3 videos below stay the same?

What i try to do is to “refresh” the include, so that 4 new random videos appear?

Anyone ?