JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="newsletter-wrap"><label for="newsletter"> Ja, ich möchte an Geschenkaktionen und Rabattaktionen teilnehmen.</label><input id="spin-newsletter" type="checkbox"></div>

JavaScript

const observer = new MutationObserver(function(mutations_list) {
      mutations_list.forEach(function(mutation) {
        mutation.addedNodes.forEach(function(added_node) {
          if (added_node.id == 'myModal-gift') {
            console.log('#child has been added');

            const spinBtn = document.querySelector('#myModal-gift .spin-btn');
            spinBtn.disabled = true;
            spinBtn.insertAdjacentHTML("beforebegin", "<div class='newsletter-wrap'><label for='newsletter'> Ja, ich möchte an Geschenkaktionen und Rabattaktionen teilnehmen.</label><input id='newsletter' type='checkbox'></div>");
            observer.disconnect();
          }
        });
      });
    });

    observer.observe(document.body, {
      subtree: false,
      childList: true
    });

    const spinNewsletter = document.querySelector('#spin-newsletter');
    spinNewsletter.addEventListener('change', function() {
      if (this.checked) {
        spinBtn.disabled = false;
      } else {
        spinBtn.disabled = true;
      }
    })