Dynamically change ID of a href based on page class

Question

I am looking to create an override of a component to add a button, however for each page that uses the override, I need the button to have a different ID as by clicking the button it will open a sidebar menu using engagebox. Engagebox uses classes/Id's to identify the action required. So for example, of the source code for the button was:

<a href="#" class="sidemenu" id="**dynamic class based on page class**"></a>

then if the page class is .industry, is it possible to set the id="industry"?

***** Update ******

Each page has a sidebar menu - at present this gets in the way of the page content, thus the website owner wants these sidebar menu's to become off canvass menu's. The menu's also need to be open on original page load. These can be closed by the user manually using the menu's close button however, there will also need to be a button to open and close the menu manually. For engage box to do this the button needs to include the data-ebox value within the div/button tags. I can add this button as an override however this will not allow the data-ebox value to change depending on the page that the menu is on (the menu is different on every page) so every page needs a different data-ebox value.

My original though was to create an array of data-ebox values which will link the correct offcanvas menu to the correct page.

<a href="#" data-ebox="1" class="sidemenu" id="generated page class"></a>

From this point I would need to select the correct ebox number from what I am guessing would be an array of all available data-ebox numbers - I'm guessing this part would need to be JS. So for example:

data-ebox 1 = .industry data-ebox 2 = .services data-ebox 3 = .business

And so on. Is this possible?

Any idea's/suggestions would be most welcome.

# Update

I have created the following code, which is getting there, however the ebox variable is not updated based on the pageclass variable. Any suggestions would be most appreciated. I have added the doc write to export the variable values for testing purposes. I have also set up a staging site here and created an article override and added the code which I have set up the page classes for the Home/About/Contact pages. Any help would be most appreciated.

<?php 
            $menu  = JFactory::getApplication()->getMenu()->getActive();
            $class = $menu->params->get('pageclass_sfx');
        ?>

        <script>
            var pageclass = "'<?php echo $class ;?>'";
            var ebox = 0;
            document.write(pageclass, ebox);

        if (pageclass == "home") {
            ebox = 1;
            } 
        else if (pageclass == "about") {
            ebox = 2;
            }
        else if (pageclass == "contact") {
            ebox = 3;
            }

        document.write('<a class="btn" data-ebox="' + ebox + '" href="#">Menu</a>');
        document.write(pageclass,ebox);
</script>

Best Regards Donna

Answer 1

You can get the page class suffix, like so:

$menu  = JFactory::getApplication()->getMenu()->getActive();
$class = $menu->params->get('pageclass_sfx');

and then add it as an ID so your anchor, like so:

<a href="#" class="sidemenu" id="<?php echo $class; ?>"></a>