How to change search box placeholder on specific pages?

Site URL: https://dragonfly-pentagon-ym6h.squarespace.com/

Hi I'm trying to change the search functions throughout my website depending on the page I'm on. So the homepage allows you to search for the whole website, and the events page lets you search for events only. 

I'm currently using the code 

<script>
  window.addEventListener('DOMContentLoaded', changeSearchPlaceholder);

  function changeSearchPlaceholder() {
    let newText = "Search Me";
    let searchBars = document.querySelectorAll('.search-input');

    searchBars.forEach(el => el.placeholder = newText)
  }
</script>

in the footer, but that ends up changing every single search box placeholder on the whole website. How do I target a specific one?