Carousel Jquery com problema quando clica no botão voltar

Tenho esse código que faz um carrosel de imagens, essas imagens podem ser clicadas para que aparaça maior na div id="area".

Só que quando clico no botão voltar a imagem anterior não funciona mais para abrir na div id="area".

Ou seja o problema está quando clico no botão voltar do carrosel, poderiam me dizer onde estou errando?

Código jquery do carrosel

$(function(){
 // vars for testimonials carousel
 var $txtcarousel = $('#testimonial-list');
 var txtcount = $txtcarousel.children().length;
 var wrapwidth = (txtcount * 526) + 526; // 400px width for each testimonial item
 $txtcarousel.css('width',wrapwidth);
 var animtime = 750; // milliseconds for clients carousel

 // prev & next btns for testimonials
 $('#prv-testimonial').on('click', function(){
 var $last = $('#testimonial-list li:last');
 $last.remove().css({ 'margin-left': '-526px' });
 $('#testimonial-list li:first').before($last);
 $last.animate({ 'margin-left': '0px' }, animtime);
 });

	Código jquery para abrir a imagem em outra div

$(document).ready(function(){
 $("button").click(function(){
 var imgUrl = $(this).data('rel');
 $("#area").html("<img src='" + imgUrl + "' alt='description' />");
 });

	Código do Html

<div class="col-md-12">
 <div id="testimonials">
 <div class="carousel-wrap ">
 <ul id="testimonial-list" class="clearfix">
 <li class="produtos_simulador_fotos"><button data-rel="uploads/<?php echo $row_simulador_fotos_produtos["nome"]?>"><img src="uploads/<?php echo $row_produtos_foto_nome["nome"]?>" class="img-responsive" /></button><br></a></li>
 </ul>
 </div>
 <div class="carousel-nav clearfix" style="margin-top: 30px;margin-bottom: 30px;width: 53.5%;">
 <i style="font-size: 30px;" class="fa fa-angle-left gdlr-flex-prev prevbtn" id="prv-testimonial"></i>
 <i style="font-size: 30px;" class="fa fa-angle-right gdlr-flex-prev nextbtn" id="nxt-testimonial"></i>
 </div>
 </div>
</div>