带有数据库的模态引导程序中的上一个和下一个按钮

Question

i'm learning the php and jquery langage. I wanted to make an image gallery that opens by a modal with bootstrap. I am using php sql because I need to edit each image. I had to make the next and previous button to switch each picture but I don't find how to realize this with a php ID.

my php :

$statement = $db->prepare('SELECT * FROM items WHERE items.category = ?');
$statement->execute(array($id));
while ($item = $statement->fetch())
{
   echo '<a data-toggle="modal" data-target="#ModImage'.$item['id'].'">
          <img src="image/'.$item['image'].'" class="polaroid" >
        </a>

        <div id="ModImage'.$item['id'].'" class="modal fade" tabindex="-1" role="dialog" name="openmodal">
          <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <img src="image/'.$item['image'].'" class="ModalImage">
                </div>
                <div class="modal-footer">
                    <div class="cleft">
                      <h1 class="hleft"><</h1>
                    </div>
                    <div class="cright">
                      <h1 class="hright">></h1>
                    </div>
                </div>
            </div>
          </div>
        </div>';
}

and the jquery :

$("div[id^='ModImage']").each(function(){

  var currentModal = $(this);

  currentModal.find('.cright').click(function(){
  currentModal.modal('hide');
  currentModal.closest("div[id^='ModImage']").nextAll("div[id^='ModImage']").first().modal('show');
  });

  currentModal.find('.cleft').click(function(){
  currentModal.modal('hide');
  currentModal.closest("div[id^='ModImage']").prevAll("div[id^='ModImage']").first().modal('show');
  });

});