Is there a way for me to reuse a javascript function without copy/pasting it?

I’ve coded a javascript function and I need to use the exact same code at least 6 different times in one page. Copy/pasting the function every time and switching out the IDs is going to get repetitive and take up a lot of space so I wanted to know if there’s a way I can use the one function for every instance I need it instead. It’s been hard trying to find a solution because the function effects three different elements at once so if anyone maybe has an idea of how to simplify the code that would be amazing.

I know the code here is invalid but here’s an example of what I’m trying to do plus the jfiddle I’ve been working on because I’m not fighting with this website’s formatting. The first one works how it’s supposed to, I don’t know how to duplicate that code for the other two examples.

var div1 = document.getElementById("image1");
var div2 = document.getElementById("image2");
const button = document.getElementById("button");


function myFunction() {
  if (button.innerHTML == ("see original")) {
    div2.style.animation = "show 1s 1 forwards";
    div1.style.animation = "shuffle 1s 1 forwards";
    button.style.animation = "nobtn1 1.75s 1 linear";
    button.innerHTML = "see official";
    div1.style.zIndex = "0";
    div2.style.zIndex = "1";
  } else {
    div1.style.animation = "show 1s 1 forwards";
    div2.style.animation = "shuffle 1s 1 forwards";
    button.style.animation = "nobtn2 2s 1 linear";
    button.innerHTML = "see original";
    div2.style.zIndex = "0";
    div1.style.zIndex = "1";
  }
}

<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>
<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>
<div class="thumbnail">
  <div class="roster">

    <div class="colourbox"></div>
    <img id="image1" src="#">
    <img id="image2" src="#">
    <div id="button" onclick="myFunction()">see original</div>

  </div>
</div>

https://jsfiddle.net/consumed_by_m0ss/vxdf6puh/208/

It might also be important to note that I’ve also tried in multiple different ways to switch the IDs to classes as suggested in some other posts I’ve seen, but that always causes an error that makes the code either unable to define the animation property or read the innerHTML