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 id="content-1" 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" class="reasonBox">Incorrect Label Applied</textarea>
</div>
</div>
CSS
.nodisplay {
display:none;
}
.content {
float:left;
width:300px;
}
JavaScript
$(document).ready(function () {
function aceeptMethod() {
var $parent = $(this).closest('.rx-container');
$('.rx-statusRejected', $parent).hide();
$('.rx-statusAccepted', $parent).show();
$('.rejectReasonBox', $parent).hide();
$('.k-tabstrip-items .k-state-default .k-link', $parent).css('color', '#7ea700');
$('.k-tabstrip .k-state-active', $parent).css('border-color', '#7ea700');
$('.k-tabstrip-items .k-state-active, .k-tabstrip .k-content.k-state-active', $parent).css('background-color', '#f5f5e9');
$(this).attr("title", "Accepted");
$(this).next().attr("title", "Reject");
$(this).removeClass('Accepted');
$(this).addClass('disableAccepted');
$(this).next().removeClass('disableRejected');
$(this).next().addClass('Rejected');
checkIfAccepted();
}
function rejectMethod(id) {
alert('ID= '+id+' was rejected');
var $content=$('#'+id);
$('.k-tabstrip-items .k-state-default .k-link').css('color', '#ff0000');
$('.k-tabstrip .k-state-active').css('border-color', '#ff0000');
$('.k-tabstrip-items .k-state-active,#content-1 .k-tabstrip .k-content.k-state-active').css('background-color', '#f5e9e9');
$content.find('.rx-statusRejected').show();
$content.find(".rx-statusAccepted").hide();
$content.find(".rejectReasonBox").show();
$('.Rejected').attr("title", "Rejected");
$('.Rejected').prev().attr("title", "Accept");
$('.Rejected').addClass('disableRejected');
$('.disableRejected').prev().addClass('Accepted');
$('.disableRejected').prev().removeClass('disableAccepted');
$('.disableRejected').removeClass('Rejected');
...