JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu">
   <h4>Staff Training Buffet</h4>
   <p class="bline"></p>
    <ul>
    	<li>Selection of Finger Sandwhiches</li>
    	<li>Spring Rolls</li>
    	<li>Samosas with Sweet Chilli Dip</li>
    	<li>Freshly Baked Mini Pasties</li>
    	<li>Cocktail Sausages</li>
    	<li>Crisp Bowls</li>
    	<li>Fresh Fruit Platter</li>
    </ul> 

    <div class="menu-gallery-slider-nav">
    	<a class="prev" href="#">Prev</a>
    	<a class="next" href="#">Next</a>
    </div>
   </div>

   <div class="menu">
   <h4>Hot Client Lunch</h4>
   <p class="bline"></p>
    <ul>
    	<li>Selection of Finger Sandwhiches</li>
    	<li>Spring Rolls</li>
    	<li>Samosas with Sweet Chilli Dip</li>
    	<li>Freshly Baked Mini Pasties</li>
    	<li>Cocktail Sausages</li>
    	<li>Crisp Bowls</li>
    	<li>Fresh Fruit Platter</li>
    </ul> 
     <div class="menu-gallery-slider-nav">
    	<a class="prev" href="#">Prev</a>
    	<a class="next" href="#">Next</a>
    </div>
   </div>

   <div class="menu">
   <h4>Corporate Event</h4>
   <p class="bline"></p>
    <ul>
    	<li>Selection of Finger Sandwhiches</li>
    	<li>Spring Rolls</li>
    	<li>Samosas with Sweet Chilli Dip</li>
    	<li>Freshly Baked Mini Pasties</li>
    	<li>Cocktail Sausages</li>
    	<li>Crisp Bowls</li>
    	<li>Fresh Fruit Platter</li>
    </ul> 
    <div class="menu-gallery-slider-nav">
    	<a class="prev" href="#">Prev</a>
    	<a class="next" href="#">Next</a>
    </div>
   </div>

CSS

.menu {
		border:1px dashed #ccc;
	}

JavaScript

$(document).ready(function() {
   
    $('.menu:not(:first)').hide();
    $('a.next').click(function() {
        
        var $menus = $(".menu"),
            index = $menus.index($(".menu:visible")),
            next = index + 1 < $menus.length ? index + 1 :0;
        $menus.eq(index).hide();
        $menus.eq(next).show();
        
    }); 
});