JSFiddle - React, Tailwind, and code Playground

by ericjohannsen

HTML

<!-- First copy -->
<div>
    <span>Foo foo foo</span>
    <span class="verbFlag">flag</span>
    <span class="verbFlagged">flagged</span>
    <div class="verbRptBox">
      <span class="verbRptGo verbRptBtn" data-dt="1">Wrong</span>
      <span class="verbRptGo verbRptBtn" data-dt="2">Pos</span>
      <span class="verbRptGo verbRptBtn" data-dt="3">Neg</span>
      <span class="verbRptGo verbRptBtn" data-dt="4">Mixed</span>
      <span class="verbRptCancel verbRptBtn">Cancel</span>
    </div>
</div>

<!-- Second copy -->
<div>
    <span>Bar bar bar</span>
    <span class="verbFlag">flag</span>
    <span class="verbFlagged">flagged</span>
    <div class="verbRptBox">
      <span class="verbRptGo verbRptBtn" data-dt="1">Wrong</span>
      <span class="verbRptGo verbRptBtn" data-dt="2">Pos</span>
      <span class="verbRptGo verbRptBtn" data-dt="3">Neg</span>
      <span class="verbRptGo verbRptBtn" data-dt="4">Mixed</span>
      <span class="verbRptCancel verbRptBtn">Cancel</span>
    </div>
</div>

CSS

span.verbFlag 
{
    font-size:8px;
    cursor:pointer;
    color:darkgray;
}

span.verbFlag:hover
{
    text-decoration:underline;
    color:darkgray;
}

span.verbFlagged
{
    font-size:8px;
    color:#8DB600;
    display:none;
}

div.verbRptBox {
    display: none;
}

span.verbRptGo {
    margin: 0px 5px;
}

span.verbRptBtn {
    font-size: 8px !important;
    cursor:pointer;
}

span.verbRptBtn:hover {
    text-decoration:underline;
}

JavaScript

$(function () {
    $('.verbFlag').click(function (e) {
        $(this).siblings('.verbRptBox').css('display', 'inline-block');
    });
    $('.verbRptCancel').click(function (e) {
        $(this).parent().css('display', 'none');
    });
    $('.verbRptGo').click(function (e) {
        debugger;
        var parent = $(this).parent()
        parent.css('display', 'none');
        parent.siblings('.verbFlag').hide();
        parent.siblings('.verbFlagged').show();
        alert('Report via Ajax! Data: ' + $(this).data('dt'));
        e.preventDefault();
    });
});