JSFiddle - React, Tailwind, and code Playground

by brijesh26

HTML

<table>
    <tr>
        <td> 
            <span style="padding-right: 20px;"><a class="showComments">comment 1</a></span>

            <div class="divCommentDetail" title="Comment">
                <p>comment 1</p>
            </div>
            <span style="padding-right: 20px;"><a class="showContractChanges">contract 1</a></span>

            <div class="divContractChangeDetail" title="Contract Change">
                <p>contract change 1</p>
            </div>
        </td>
    </tr>
    <tr>
        <td> 
            <span style="padding-right: 20px;"><a class="showComments">comment 2</a></span>

            <div class="divCommentDetail" title="Comment">
                <p>comment 2</p>
            </div>
            <span style="padding-right: 20px;"><a class="showContractChanges">contract 2</a></span>

            <div class="divContractChangeDetail" title="Contract Change">
                <p>contract change 2</p>
            </div>
        </td>
    </tr>
</table>

JavaScript

$('.showComments').each(function () {
    var panel = $(this).parent().siblings('.divCommentDetail');
    $(this).click(function () {
        panel.dialog('open');
    });
});

$('.showContractChanges').each(function () {
    var panel = $(this).parent().siblings('.divContractChangeDetail');
    $(this).click(function () {
        panel.dialog('open');
    });
});


$(".divCommentDetail, .divContractChangeDetail").dialog({
    autoOpen: false,
    modal: true,
    open: function () {
        $(this).parent().siblings('.ui-dialog-titlebar').addClass('ui-state-error');
    },
    show: {
        effect: 'blind',
        duration: 1000
    },
    hide: {
        effect: 'explode',
        duration: 1000
    }
});