Как изменить изображение, а также содержимое, указанное ниже, при нажатии на ссылку во вкладке в формате jquery или javascript?

Question

Я пытаюсь создать галерею подружки невесты и жениха.

Пример свадебной галереи

Что мне нужно, когда кто-то нажимает на ссылку для Мэри (с картинки выше), мне нужно новое изображение, чтобы появиться и для Марии как новый контент для Марии. И по мере того, как вы нажимаете на каждую из вкладок: Лиззи, Ханна того же шаблона, новое изображение и новый контент. Это циклы.

Я создал простой сайт Bulma и у меня работают вкладки Bulma, однако я не уверен, как создать событие jquery, которое я могу привязать к ссылке вкладки, чтобы изменить изображение. , Вот мой код с уже работающими вкладками.

bulma html

    <div class="main-container">
    <div class="columns">
        <div class="column is-half">
            {# <figure class=" bridesmaids image is-square">
                <img src="https://bulma.io/images/placeholders/256x256.png">
            </figure> #}
            <div class="test">
                <img src="https://bulma.io/images/placeholders/128x128.png">
                <img src="https://bulma.io/images/placeholders/256x256.png">
            </div>
            <div id="tabs-with-content">
                <div class="tabs is-centered">
                    <ul>
                    <li><a>Bridesmaids</a></li>
                    <li><a>bridemaid 1</a></li>
                    <li><a>bridemaid 2</a></li>
                    <li><a>bridemaid 3</a></li>
                    <li><a>bridemaid 4</a></li>
                    <li><a>bridemaid 5</a></li>
                    </ul>
                </div>
                <div>
                    <section class="tab-content">Bridesmaids content</section>
                    <section class="tab-content">bride maid 1 content</section>
                    <section class="tab-content">bride maid 2content</section>
                    <section class="tab-content">bride maid 3 content</section>
                    <section class="tab-content">bride maid 4 content</section>
                    <section class="tab-content">bride maid 5 content</section>
                </div>
            </div>
 <div class="column is-half">
            {# <figure class=" groomsmen image is-square">
                <img src="https://bulma.io/images/placeholders/256x256.png">
            </figure> #}
            <div class="test">
                <img src="https://bulma.io/images/placeholders/128x128.png">
                <img src="https://bulma.io/images/placeholders/256x256.png">
            </div>
            <div id="tabs-with-content">
                <div class="tabs is-centered">
                    <ul>
                    <li><a>Groomsmen</a></li>
                    <li><a>groomsmen 1</a></li>
                    <li><a>groomsmen 2</a></li>
                    <li><a>groomsmen 3</a></li>
                    <li><a>groomsmen 4</a></li>
                    <li><a>groomsmen 5</a></li>
                    </ul>
                </div>
                <div>
                    <section class="tab-content">Groomsmen content</section>
                    <section class="tab-content">groomsmen 1 content</section>
                    <section class="tab-content">groomsmen 2content</section>
                    <section class="tab-content">groomsmen 3 content</section>
                    <section class="tab-content">groomsmen 4 content</section>
                    <section class="tab-content">groomsmen 5 content</section>
                </div>
            </div>
        </div>

    Jquery here:

$(document).ready(function(){
    //Question handler
let tabsWithContent = (function () {
    let tabs = document.querySelectorAll('.tabs li');
    let tabsContent = document.querySelectorAll('.tab-content');
    let bridesImage = document.querySelectorAll('.test img');

    let hideImages = function () {
      bridesImage.each(function (brideImage) {
        console.log(brideImage);
        bride_image.hide();
      });
    };

    let deactvateAllTabs = function () {
      tabs.forEach(function (tab) {
        console.log(tab);
        tab.classList.remove('is-active');
      });
    };

    let hideTabsContent = function () {
      tabsContent.forEach(function (tabContent) {
        tabContent.classList.remove('is-active');
      });
    };

    let activateTabsContent = function (tab) {
      tabsContent[getIndex(tab)].classList.add('is-active');
    };

    let getIndex = function (el) {
      return [...el.parentElement.children].indexOf(el);
    };

    tabs.forEach(function (tab) {
      tab.addEventListener('click', function () {
        deactvateAllTabs();
        hideTabsContent();
        tab.classList.add('is-active');
        activateTabsContent(tab);
      });
    })

    tabs[0].click(); //sets first tab to active and clicked
  })();
});//End Ready