How to make multiple buttons work independently using one function in java script?

Question

How to make more of this buttons so they will work independently? I know that it is all connected with id, but how to use one function, with multiple id's?

function showme(id) {
  var divid = document.getElementById(id);
  var clicky = document.getElementById("clicky");
  if (divid.style.display == 'block') {
    divid.style.display = 'none';
    clicky.innerHTML = 'MORE <i class="fa fa-arrow-down"></i>';
  } else {
    divid.style.display = 'block';
    clicky.innerHTML = 'LESS <i class="fa fa-arrow-up"></i>';
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i>Click on more. I want to have two buttons, which work independently.</i><br>

<div class="tp-caption rev-btn rev-hiddenicon  rs-hover-ready rev-mre-btn" onclick="showme('widget');" href="javascript:;" id="clicky">MORE 
  <i class="fa fa-arrow-down"></i>
</div>

<div id="widget" style="display:none;">
  TEXT 1
</div>

Answer 1

First of all I would remove the onclick listener that you added inside HTML, that's not a good practice. I would add it on the JS, selecting all buttons/divs that I want to add a click listener, then attaching it.

To do that, you can select all of them by using .getElementsByClassName() (you can also use querySelectorAll()), with the elements saved in a variable, then loop all elements and attach the onclick function.

the function context ( this) would be the clicked button/div, knowing that, inside the function you can find the icon and the contained div (I moved the div inside because it makes more easier to find itand know which div should be toggled). After having the inner div and icon, now it's up to you to manage the open/close of the div and the icon transformation...

Take a look on the code below to see the main idea.

var buttons = document.getElementsByClassName("button-open-container");
for (var i = 0; i < buttons.length; i++){
  buttons[i].onclick = showme;
}

function showme(ev) {   
  var spanText = this.querySelector(".my-text");
  var childDiv = this.querySelector(".my-container");  
  var icon = this.querySelector(".my-icon");  
  
  if (childDiv.style.display == "none"){
    childDiv.style.display = "block";
    icon.className = "my-icon fa fa-arrow-up";
    spanText.innerText = "LESS"
  }
  else{
    childDiv.style.display = "none";
    icon.className = "my-icon fa fa-arrow-down";
    spanText.innerText = "MORE";
  }    
}

.button-open-container{
  display: inline-block;
  margin: 8px;  
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<i>Click on more. I want to have two buttons, which work independently.</i><br>

<div class="tp-caption rev-btn rev-hiddenicon rs-hover-ready rev-mre-btn button-open-container">
  <span class='my-text'>MORE</span>
  <i class="my-icon fa fa-arrow-down"></i>
  <div class='my-container' style="display:none;">
    TEXT 1
  </div>
</div>

<div class="tp-caption rev-btn rev-hiddenicon rs-hover-ready rev-mre-btn button-open-container">
  <span class='my-text'>MORE</span>
  <i class="my-icon fa fa-arrow-down"></i>
  <div class='my-container' style="display:none;">
    TEXT 2
  </div>
</div>