I am trying to create a function in my vanilla JavaScript to delete tabs created by using cloneNode(true). Below is what i have tried but its not just working.

I created a form with class named secondSectionEmail; at the click of the button (+), the form is duplicated using cloneNode(). Each form is carrying a (x) button which is supposed to delete a particular tab. How do I achieve this please?

<form class="secondSectionEmail"> 
 <button id="closeBtn">x</button>
 <input type="email" id="recipient" placeholder="Enter Recipient Email">
 <input type="text" placeholder="Subject"><br>
  <textarea type="text" placeholder="Enter Message"></textarea>
    <div class="upload">
        <input type="file" multiple>
        <button>Send Mail</button>
    </div>
 </form>
<br>
<br>
<button type="submit" id="arrow">+</button>

<script>
//script to add new tab
let addbutton = document.getElementById("arrow");
var i = 0;

addbutton.addEventListener("click", function (e) {
  e.preventDefault();
    let boxes = document.querySelector(".secondSectionEmail");
    let closeC = document.getElementById('closeBtn');
    var clone = boxes.cloneNode(true);
  
    i++;
    clone.className=`secondSectionEmail${i}`;
    clone.classList.add(`mydiv`);
    closeC.classList.add(`timzy${i}`);
    boxes.after(clone);
})



//Script to delete tab
let deleteButton = document.querySelector(`.container`)

deleteButton.addEventListener("click", function (event) {
event.preventDefault()
  var del = event.target.parentElement.className;
  let newDel = document.getElementsByClassName(`${del}`);
  let newDelete = Array.from(newDel)
  console.log(newDelete)
})
</script>