Different buttons toggling same content

there are 3 buttons and when you click 3 of them showing the same content. I need to show unique content of buttons when you click on them seperately. how to make each button should show div’s unique content?

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
span {
cursor:pointer;}
<span onclick="myFunction()"class="total">button</span>
<div id="myDIV" style="display:none;" class="expandable">
   content 1
</div>
<span onclick="myFunction()" class="total">button2</span>
<div id="myDIV" style="display:none;" class="expandable">
   content 2
</div>
<span onclick="myFunction()" class="total">button3</span>
<div id="myDIV" style="display:none;" class="expandable">
   content 3
</div>