how could i change this java script or copy it to have two on click function for two buttons and images

html:

<div class="vaultcontainer">
  <img src="img/vault.svg" alt="" id="image">

</div>

<button id="image-button">click </button>
<button id="image-button2">click </button>

js:

const button = document.getElementById('image-button');
const image = document.getElementById('image');

button.addEventListener('click', function() {
  changeImage();
});

function changeImage() {
  image.src = 'img/vault2.svg';
}

Use a class:

<button class="js-changeImage">click </button>
<button class="js-changeImage">click </button>

then, in JS use querySelectorAll() and .forEach() on the returned NodeList:

const buttons = document.querySelectorAll('js-changeImage');

buttons.forEach(btn => btn.addEventListener('click', changeImage));

If you need to specify different images for your buttons — use the data-* attribute:

<img src="img/vault.svg" alt="" id="image">

<button data-image="img/cat.svg">click </button>
<button data-image="img/dog.svg">click </button>

const image = document.querySelector('#image');
const buttons = document.querySelectorAll('[data-image]');

buttons.forEach(btn => btn.addEventListener('click', () => {
  changeImage(btn.dataset.image);
});

function changeImage(src) {
  image.src = src;
}