How to pass an argument to a getElementById method?

working on a way of displaying information, 8 panels (when each is clicked it expands content below) - however I am trying to add styling so that when one panel is clicked (active) - the background color updates to green and is removed when a new element is clicked. I can't seem to pass the tabName parameter to getElementById so for now the parameter is hardcoded as banking-tab (which does update to green when clicked). Does anyone have any advice for the best possible solution and a potential approach to explore for the remove function?

function onExpandFuncs(tabName) {
  openTab(tabName);
  styleTab(tabName);
}

function openTab(tabName) {
  var i, x;
  x = document.getElementsByClassName('containerTab');
  for (i = 0; i < x.length; i++) {
    x[i].style.display = 'none';
  }
  document.getElementById(tabName).style.display = 'block';
}

function styleTab(tabName) {
  document.getElementById('banking-tab').classList.add('active-column');
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  background-color: black;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}
.active-column {
  background-color: green;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}

/* Closable button inside the container tab */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js"></script>
  </head>
  <body>
    <div style="text-align: center">
      <h2>Expanding Grid</h2>
      <p>Click on the boxes below:</p>
    </div>

    <!-- Four columns -->
    <div class="row">
      <div id="banking-tab" class="column" onclick="onExpandFuncs('b1');">
        <img src="./Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="regtech-tab" class="column" onclick="onExpandFuncs('b2');">
        <img src="./Icons/Regtech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="insurtech-tab" class="column" onclick="onExpandFuncs('b3');">
        <img src="./Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="lending-tab" class="column" onclick="onExpandFuncs('b4');">
        <img src="./Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <!-- Full-width columns: (hidden by default) -->
    <div id="b1" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h3>Banking</h3>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b2"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>RegTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b3"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>InsurTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b4"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Lending</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <!-- Bottom four columns -->
    <div class="row">
      <div class="column" onclick="openTab('b5');">
        <img src="./Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b6');">
        <img src="./Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b7');">
        <img src="./Icons/Quote.svg" />
        <p>Quote Aggregators</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" onclick="openTab('b8');">
        <img src="./Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <div
      id="b5"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Accounting</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b6"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Payments</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b7"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Quote</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b8"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>WealthTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>
  </body>
</html>

Any help would be really appreciated!

Solution

All you need to do is loop over all the tab elements and set up a click handler on the each that will set the background color of this, which will represent the element that is handling the event. No need to know or use an id (which should be avoided when possible as their use creates brittle code).

Also don't use .getElementsByClassName().

I've removed all the onclick attributes that aren't relevant to this question to avoid errors from their callbacks not being included in the code here.

// Get all the tabs into a collection
// (don't use .getElementsByClassName()!)
let tabs = document.querySelectorAll(".column");

// Loop over all the tabs
tabs.forEach(function(tab){
  // Set up a click event handler on each of the tabs
  tab.addEventListener("click", function(event){
    // Loop over all the tabs and remove the active class
    tabs.forEach(function(tab){
      tab.classList.remove("active-column");
    });
  
    // Set the background of the clicked tab
    this.classList.add("active-column");
  });

});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

/* The grid: Four equal columns that floats next to each other */
.column {
  background-color: black;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}
.active-column {
  background-color: green;
  float: left;
  width: 25%;
  height: 226px;
  padding: 50px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  color: white;
}

.containerTab {
  padding: 20px;
  color: white;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}

/* Closable button inside the container tab */
.closebtn {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js"></script>
  </head>
  <body>
    <div style="text-align: center">
      <h2>Expanding Grid</h2>
      <p>Click on the boxes below:</p>
    </div>

    <!-- Four columns -->
    <div class="row">
      <div id="banking-tab" class="column">
        <img src="./Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="regtech-tab" class="column">
        <img src="./Icons/Regtech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column">
        <img src="./Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column">
        <img src="./Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <!-- Full-width columns: (hidden by default) -->
    <div id="b1" class="containerTab" style="display: none; background: black">
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h3>Banking</h3>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b2"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span class="closebtn"
        >&times;</span
      >
      <h2>RegTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b3"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span class="closebtn"
        >&times;</span
      >
      <h2>InsurTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b4"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span class="closebtn"
        >&times;</span
      >
      <h2>Lending</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <!-- Bottom four columns -->
    <div class="row">
      <div class="column" >
        <img src="./Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" >
        <img src="./Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" >
        <img src="./Icons/Quote.svg" />
        <p>Quote Aggregators</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div class="column" >
        <img src="./Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
    </div>

    <div
      id="b5"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Accounting</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b6"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Payments</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b7"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>Quote</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div
      id="b8"
      class="containerTab"
      style="display: none; background: lightgrey"
    >
      <span onclick="this.parentElement.style.display='none'" class="closebtn"
        >&times;</span
      >
      <h2>WealthTech</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>
  </body>
</html>