I have added the following script to my web page where a newsletter sign up action can occur. I am trying to display some custom content once the user subscribes.

<script>
  function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

    var news = document.getElementsByClassName("et_pb_newsletter_success")[0].selectedIndex;
    var text = document.createTextNode("Thank you for joining our SOS Family! We are very grateful to have you with us. Thanks to compassionate people like you, SOS is meeting needs and improving the lives of our friends and neighbours in District 69. You can expect valuable emails from us on a regular basis, and you can unsubscribe at any time.");
    var learn = document.createTextNode("Learn more about SOS.")
  insertAfter(news,text);
  insertAfter(text,learn);
  
  var img = document.createElement("img");
  img.src = "https://sosd69.com/wp-content/uploads/newsletter_success.jpeg";
    
  insertAfter(learn,img);

    let btn = document.createElement("button");
    btn.innerHTML = "Watch Video";
    btn.onclick = function () {
        window.location='https://www.youtube.com/watch?v=OcYyhazCiHs';
    };
    btn.classList.add("et_pb_button_0");
  insertAfter(img,btn);
</script>

I am receiving the following console error:

Uncaught TypeError: Cannot read properties of undefined (reading 'parentNode')
    at insertAfter ((index):666)
    at (index):672

Is there an error in the way I have created the insertAfter function? Perhaps the issue is that the script is loading before the "et_pb_newsletter_success" class is created, when the subscribe button is clicked. Any insight would be much apppreciated!