What I am basically asking here is: "How do I create two Buttons that do the same thing on the same Wix Page?"

I have added some custom code to create an Expanding Text function for when someone clicks "Read More".

My problem is that I have defined each individual button (total of 4 buttons) and its function like so:

    $w.onReady(function () {
    // Write your JavaScript here
    // column1
    $w("#readMoreButton1").onClick(() => {
        $w("#readMoreStatebox1").changeState("expandedState1");
    });

    $w("#readLessButton1").onClick(() => {
        $w("#readMoreStatebox1").changeState("collapsedState1");
    });
    //column2
    $w("#readMoreButton2").onClick(() => {
        $w("#readMoreStatebox2").changeState("expandedState2");
    });

    $w("#readLessButton2").onClick(() => {
        $w("#readMoreStatebox2").changeState("collapsedState2");
    });
    //column3
    $w("#readMoreButton3").onClick(() => {
        $w("#readMoreStatebox3").changeState("expandedState3");
    });

    $w("#readLessButton3").onClick(() => {
        $w("#readMoreStatebox3").changeState("collapsedState3");
    });
    //column4
    $w("#readMoreButton4").onClick(() => {
        $w("#readMoreStatebox4").changeState("expandedState4");
    });

    $w("#readLessButton4").onClick(() => {
        $w("#readMoreStatebox4").changeState("collapsedState4");
    });

    // To select an element by ID use: $w('#elementID')

    // Click 'Preview' to run your code
});

Read More/Read less Feature

The end result is that the first button/column one works but the rest dont. I have tried changing syntax but I fear that I may be missing something very simple. Can I get some help on this?