While adding images in between the <a> the carousel stops working - html

Question

#6 image carousel not working while adding While adding images in between the the carousel stops working. #
<div id="display-panel">
<img src="images/left.jpg" class="prev" alt="">
<div class="display-panel-inner">
<img src="images/book1.jpg" alt="" class="active">
<img src="images/book2.jpg" alt="">
<img src="images/book3.jpg" alt="">
<img src="images/book5.jpg" alt="">
<img src="images/book6.jpg" alt="">
<img src="images/book7.jpg" alt="">
</div>
<img src="images/right.jpg" class="next" alt="">
</div>
#jquery for the above code is not working for the tag i did some changes as well they are also not working #
$(document).ready(() => {
$('.next').on('click', () => {
var isImg = $('.abc');
var a = isImg.next('');
console.log(a);
var currentImg = $('.active');
var nextImg = currentImg.next('.active');
console.log(nextImg);
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', 10);
nextImg.addClass('active').css('z-index', 10);
}
});
$(document).ready(() => {
$('.prev').on('click', () => {
var currentImg = $('.active');
var prevImg = currentImg.prev();
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', 10);
prevImg.addClass('active').css('z-index', 10);
}
});
});
});