JSFiddle - React, Tailwind, and code Playground

by maremp

HTML

<div class="simple-card" id="statusfor-12">
    <div class="simple-card-actions">
        <span class="wpfp-span">
            <a class="addlink mar-12" href="#" data-status="12">Click me to toggle</a>
        </span>
    </div>
</div>

CSS

.simple-card {
    background: whitesmoke;
}

.finished-reading {
    background: grey;
}

JavaScript

jQuery(".addlink").click(function(){
    var post_id = jQuery(this).attr("data-status");
    var events = jQuery._data(this, "events");
    if(events && events.click.length > 1)
         return;
    console.log("adding click listener");
    jQuery(".mar-"+post_id).click(function() {
        console.log("mar clicked");
        jQuery("#statusfor-"+post_id).toggleClass( "finished-reading" );
    });
});