openModal is not defined at HTMLAnchorElement.onclick

Every time I click on the icon which is defined on the following line of user.ejs

<a href="#" onclick="openModal()">+</a>

it is shown the openModal() is not defined at htmlanchorElement.onclick. the openModal function is defined in the script section of the file add-user-modal like this:

function openModal() {
    modal.style.display = "block";
}

please help!

this is my user.ejs file

// starts here

<%- include('./partial/header.ejs'); %>
  <div class="manageUser-container">
    <div id="title">
      <h2>Manage Users</h2>
    </div>

    <div class="new-message-container new-user">
      <a href="#" onclick="openModal()">+</a>
    </div>

    <div id="users-table">
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Manage</th>
          </tr>
        </thead>
        <tbody id="users-table">
          <tr id="">
            <td class="name">
              <img src="./images/user1.png" />
              <span>User 1</span>
            </td>
            <td>email@email.com</td>
            <td class="manage">
              <img src="./images/trash.png" alt="Delete" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <%- include('./partial/add-user-modal.ejs'); %>
    </body>

    </html>

// this is the add-user-modal.ejs file

<div class="modal-wrapper" id="add-user-modal">
    <div class="modal">
        <a href="#" onclick="closeModal()" class="modal-close">+</a>
        <div class="modal-title">
            <h2>Create New User</h2>
        </div>
        <div class="modal-body">
            <form method="post" action="/users" enctype="multipart/form-data" id="add-user-form">
                <input type="text" placeholder="enter name" name="name" />
                <p class="error name-error"></p>
                <input type="text" placeholder="enter email" name="email" />
                <p class="error email-error"></p>
                <input type="text" placeholder="enter mobile" name="mobile" />
                <p class="error mobile-error"></p>
                <input type="password" placeholder="enter password" name="password" />
                <p class="error password-error"></p>
                <input type="file" name="avatar" />
                <p class="error avatar-error"></p>
                <p class="error common-error"></p>

                <input type="submit" value="Submit" />
            </form>
        </div>
    </div>
</div>
<script>

    console.log('Hello from console');

    const modal = document.querySelector("#add-user-modal");
    const form = document.querySelector("#add-user-form");
    function closeModal() {
        modal.style.display = "none";
    }

    function openModal() {
        modal.style.display = "block";
    }
    // success toast
    const successToast = Toastify({
        text: "User was added successfully. Reloading the list...",
        duration: 1000
    })

    // form submit handler
    form.onSubmit = async function (event) {
        event.preventDefault();
    }

    // clear all the error first
    const errorPlaceHolder = document.querySelectorAll("p.error");
    for (let index = 0; index < errorPlaceHolder.length; index++) {
        errorPlaceHolder[index].style.display = "none";
    }

    const inputErrors = document.querySelectorAll("input", "error");

    if (inputErrors.length > 0) {
        for (let index = 0; index < inputErrors.length; index++) {
            inputErrors[index].classList.remove("error");
        }
    }

    // prepare the form data
    const formData = new FormData(form);

    // send the request to server 
    let response = await fetch("/users", {
        method: "POST",
        body: formData,
    });

    // get response
    let result = await response.json();

    // handle error and response
    if (result.errors) {
        //errors
        Object.keys(result.errors).forEach((fieldName) => {
            // add error class to all the input fields
            form(fieldName).classlist.add("error");

            // set all error to the place holder text content
            const errorPlaceHolder = document.querySelector(`.${fieldName}-error`);
            errorPlaceHolder.textContent = result.errors[fieldName].msg;

            // make all place holder visible
            errorPlaceHolder.style.display = "block";

        });
    } else {
        // success
        successToast.showToast();
        closeModal();
        document.querySelector("p.error".style.display) = "none";

        // reload the page after one second
        setTimeout(() => {
            location.reload();
        }, 1000);
    }



</script>