JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="rx-container"> <span title="Accept" class="Accepted">Accept</span>

        <br>
        <br> <span title="Reject" class="Rejected">Reject</span>

        <div class="rx-statusMessage">
            <br>
            <br>
            <p class="rx-statusAccepted nodisplay">Accepted</p>
            <p class="rx-statusRejected nodisplay">Rejected</p>
            <div class="rejectReasonBox nodisplay">Reason: <span>Incorrect Label Applied</span>

            </div>
        </div>
    </div>
</div>
<div id="rejectReason" title="Reason">
    <p>Please provide the reason for cancelling the session.</p>
    <div class="inputRow">
        <textarea id="rejectReasonBox"...

CSS

.nodisplay {
    display:none;
}
.content {
    float:left;
    width:250px;
}

JavaScript

$(document).ready(function () {
        function aceeptMethod() {
            var $parent = $(this).closest('.rx-container');

            //$(this).next().bind('click'); 
            $(".Rejected").prop('disabled', false);// BINDING BACK THE CLICK EVENT
            $('.rx-statusRejected', $parent).hide();
            $('.rx-statusAccepted', $parent).show();
            $('.rejectReasonBox', $parent).hide();
        }

        function rejectMethod() {
            $('.selected .rx-statusRejected').show();
            $(".selected .rx-statusAccepted").hide();
            $(".selected .rejectReasonBox").show();
             $('.selected .Rejected').css('color','#888');
            $('.selected .Rejected').unbind('click'); 
            $(".Rejected").prop('disabled', true);// UNBINDING THE CLICK EVENT
        }

        $("#rejectReason").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                    rejectMethod();
                },
                    "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

        $(".Accepted").click(aceeptMethod);
        $(".Rejected").click(function () {
            $(this).closest('.rx-container').addClass('selected');
            $("#rejectReason").dialog("open");
        });

    });