Using Javascript to change a div’s text depending on what button is pressed

I’m sure this is easier than what I’m making it out to be, but – I need to change a paragraph depending on what button is pressed. I want to use the same buttons as the ones I click on to change the main-img.

To reiterate, my goal is: if I click on a button, for example, Executioner, I want the image to change to the executioner image (like i already have set up) and subclassDesc to change to the appropriate subclass information that I need.

This is the HTML (I dont think the mainbox information is super relevant for this question so ignore that if you will – I just need to know how to properly change the stated information.)

    <div id="imgContain">
        <img id="main-img" src="default.png">
    </div>
    <div id="mainBox">
        <div class="tabMain">
            <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
            <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
            <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
        </div>

        <div id="Overview" class="tabcontentMain">
            <h3>Overview</h3>
            <p>blablabla.</p>
            <p id="subclassDesc">
                <h3>Insert Subclass Here</h3>
                insert subclass info here
            </p>    
        </div>
        <div id="Subclasses" class="tabcontentMain">
            <h3>Subclasses</h3>
            <p>
                <button id="subclass" onclick="changeImg('./assets/010.-Arbalest.png')">Arbalest</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/011.-Dreadnaught.png')">Dreadnought</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/012.-Executioner.png')">Executioner</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/013.-Lancer.png')">Lancer</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/014.-Titan.png')">Titan</button>
            </p>
        </div>

This is the Javascript


function changeImg(uri) {
    var image = document.getElementById('main-img');

    image.src = uri;
}

function insertTxt() {
    const button = document.getElementById('subclass');
    const p = document.getElementById('subclassDesc');

//what do i do here? Do i even need this?//
}

I just need answers, I’m very new to Javascript and don’t really fully understand everything. I don’t even know what to do with the function.
Do i need if else statements? How do I do all this on the same function with different parameters?