JSFiddle - React, Tailwind, and code Playground

by Deliveron

HTML

<button type="button" id="subscribe">Subscribe</button>
<button type="button" id="unsubscribe">Unsubscribe</button>

<div id="container">
<p class="add">
    This paragraph is wired up with the .on method. Clicking it will add another paragraph.
</p>
</div>

CSS

p.add {
    background: red;
    cursor: pointer;
    padding: 6px;
    margin: 8px;
    color: white;
    border-radius: 6px;
}

JavaScript

$('#subscribe').click(function() {
    $('#container').on('click', 'p.add', function() {
        $('#container').append('<p class="add">This paragraph was added dynamically and it also has a click handler attached to it. Clicking this paragraph will also add a new paragraph.</p>');
    });
});

$('#unsubscribe').click(function() {
    $('#container').off('click', 'p.add');
});