In this assignment, the HTML page is given to me and I can't make changes to the HTML page. My task is to add an image into the website by using JQuery. The code is as given for the HTML page:

 <!-- Sign Up  -->
  <template id="signUp">
    <form @submit.prevent='onSubmit' ref='form' action="" class='register-form'>
      <h2>New Account</h2>
      ...
      <input type="submit" :disabled='!isFormValid' value='Register'>
    </form>
  </template>

  <!-- Sign In  -->
  <template id="signinIn">
    <form ref='form' @submit.prevent='handleForm' action="" class='signin-form'>
      <h2>Sign In</h2>
      ...
      <input :disabled='!isFormValid' type="submit" value="Sign In">
    </form>
  </template>

The assignment want us to add an image above both the New Account and Sign In h2 tag by using JQuery. I code is as followed:

$(document).ready(function () {
  console.log("Document ready");

  const $form = $("form");
  const $body = $("body");
  const $wrapper = $("<div class='wrapper flex-column'>");

  // function to add logo above form
  const addImage = (form) => {
    form.find("h2").prepend(`
      <div class='logo flex-row'>
        <img src='./assets/image.png' alt="logo" />
      </div>
    `);
  };

  // wrap body contents
  $body.wrapInner($wrapper);

  addImage($form);
});

The idea is to add the image above both the h2 tag from sign up and sign in. The problem I'm running into is that I'm only getting one image above the New Account h2 tag and not for both. Any suggestions?