const addbtn = document.querySelector(".newuser");
const addUserInp = document.querySelector(".addUser");
const expDate = document.querySelector(".expDate");
const userName = document.querySelector(".username");
const trash = document.querySelector(".trash");
const submitbtn = document.querySelector(".submit");
const uninp = document.querySelector(".uninp");
const edinp = document.querySelector(".edinp");
const userNameInput = document.querySelector(".usernamekey.adduserinp");
const expDateInput = document.querySelector(".expdatekey.adduserinp");
const rowz = document.querySelector(".rows");


submitbtn.addEventListener("click", function() {
  const unl = document.querySelectorAll(".row.username").length;
  const edl = document.querySelectorAll(".row.expDate").length;
  let un = userNameInput.value;
  let ed = expDateInput.value;
  rowz.insertAdjacentHTML(
    "beforebegin",
    `<h2 class="usernum">User ${unl + 1} </h2>
     <div class="row username ${unl + 1}">
       <p class=""><img src="profile-user.png" alt=""> 
       <img class="verticalline" src="icons8-vertical-line-100.png" alt="">${un}</p>
     </div>
     <div class="row expDate ${edl + 1}">
       <p class="">
         <img src="icons8-date.gif" alt=""> 
         <img class= "verticalline" src= "icons8-vertical-line-100.png" alt="">${ed}
       </p>
     </div>
     <img src="icons8-edit-30.png" alt="" class="edit ${unl + 1}">
     <img src="trash.png" alt="" class="trash ${unl + 1}">`
  );

  document.querySelectorAll(".trash").forEach(function(button) {
    button.addEventListener("click", function() {
      const indexClass = button.classList[1];
      console.log("Index class:", indexClass);
      document.querySelector(".row.username." + indexClass).remove();
    });
  });
});

<div class="container">
  <div class="lists">
    <p class="sectionTitle">Users List</p>
    <div class="rows">
      <img class="newuser" src="icons8-add-user-64.png" alt="">
      <img class="save" src="icons8-save-96.png" alt="">
      <div class=" addUser hidden ">
        <div class="uninp">
          <input class="usernamekey adduserinp " type="text" placeholder="User Name">
        </div>
        <div class="edinp">
          <input class="expdatekey adduserinp " type="date" placeholder="Expiry Date">
        </div>
        <button class="submit">Submit</button>
      </div>
    </div>
  </div>
</div>
<script src="UserList.js"></script>