Использование функции Javascript One On Click для переключения между несколькими изображениями

Question

С этим кодом, который я сделал, я могу использовать JQuery для переключения между несколькими фотографиями с различными функциями onclick. Однако позже я собираюсь настроить базу данных SQL с этими фотографиями, поэтому я пытаюсь сделать так, чтобы мне приходилось использовать только ОДНУ функцию щелчка для переключения между несколькими фотографиями.

Как это будет работать, всякий раз, когда я нажимаю на первый элемент в массиве .menuImage, появляется первая фотография, когда я нажимаю на второй элемент в массиве .menuImage, вторая фотографиявсплывающее окно (и т. д.).

Просто чтобы уточнить:

<li><a onclick="openMenuItem1();"><button>&#8250;</button>(text)</a></li>

будет автоматически заполняться на странице при настройке базы данных.

Кто-нибудьбыть в состоянии помочь мне?

    function openMenuItem1(){
        console.log("Click Nachos");
        $(".menuImage").css('display', 'none');
        $("#nachoPic").css('display', 'block');
    }
    
    function openMenuItem2(){
        console.log("Click Loaded Cheese Fries");
        $(".menuImage").css('display', 'none');
        $("#cheeseFriesPic").css('display', 'block');
    }
    
    function openMenuItem3(){
        console.log("Click Chicken Quesadilla");
        $(".menuImage").css('display', 'none');
        $("#chickenQuesPic").css('display', 'block');
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a onclick="openMenuItem1();"><button>&#8250;</button>Nachos</a></li>
    <li><a onclick="openMenuItem2();"><button>&#8250;</button>Loaded Cheese Fries</a></li>
    <li><a onclick="openMenuItem3();"><button>&#8250;</button>Chicken Quesadilla</a></li>