JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Start Module Score -->
<div id="module_score" class="module_block">
    <div class="module_title title_bg_blue">
        Judging Form
    </div>
    
    <div class="exp_item">
        <div class="exp_show">
            <div class="exp_show_date">1</div>
            <div class="exp_show_name">Live District Competition</div>
            <div class="exp_show_icon plus"></div>
        </div>
        
        <div class="exp_hide exp_hide_blue">
            <div class="score_item">
                <div class="score_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel purus quam. Pellentesque auctor, risus ornare posuere tristique.
                </div><div class="score_rate">
                <div class="score_val">Score</div><div class="score_plus plus">
                <div class="score_sel">
                    <div>0</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                </div>
                </div>
                </div>
            </div>
            
            <div class="score_item">
                <div class="score_text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel purus quam. Pellentesque auctor, risus ornare posuere tristique.
                </div><div class="score_rate">
                <div class="score_val">Score</div><div class="score_plus plus">
                <div class="score_sel">
                    <div>0</div>
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                </div>
                </div>
                </div>
            </div>
            
            <div class="score_items">
                <div class="score_total_text">
                    Total (5 points per question)
               ...

SCSS

// Start Module Schedule
#module_schedule {

	.btn_schedule {
		display: block;
		margin: 0 auto;
	}
}

.download_line {
	display: block;
	font-size: 15px;
	padding-bottom: 30px;
	padding-top: 20px;
	text-align: right;
	width: 100%;

	a{
		color: #00356a;
		margin-left: 15px;
		text-decoration: underline;
	}
}

.exp_item {
	display: block;
	height: auto;
	margin-bottom: 8px;
	position: relative;
	width: 100%;
}

.exp_show {
	background-color: #0075c0;
	border-radius: 10px;
	color: #fff;
	cursor:pointer;
	display: table;
	font-size: 18px;
	min-height: 75px;
	position: relative;
	width: 100%;
	transition:all .2s linear;

	&:not(.score_started):not(.score_complete):hover {
		background-color: rgba(0, 117, 192, 0.8);
	}
}

.exp_show_active {
	background-color: rgba(0, 117, 192, 0.8);
}

.exp_show_date {
	background-color: #004978;
	border-bottom-left-radius: 10px;
	border-right: 1px solid #006db3;
	border-top-left-radius: 10px;
	display: table-cell;
	font-size: 18px;
	min-height: 75px;
	position: relative;
	vertical-align: middle;
	text-align: center;
	width: 150px;
	white-space: nowrap;
}

.exp_show_date:after {
	background: url(../images/module_schedule/left-arrow.png) no-repeat;
	content: '';
	height: 73px;
	margin-top: -34px;
	position: absolute;
	right: -10px;
	top: 50%;
	width: 27px;
}

.exp_show_name {
	display: table-cell;
	font-size: 20px;
	min-height: 75px;
	padding-left: 20px;
	vertical-align: middle;
}

.exp_hide {
	color: #8a8987;
	display: none;
	font-size: 18px;
	padding: 10px 20px;
}

.exp_show_icon {
	border-left: 1px solid #fff;
	display: table-cell;
	max-width: 100px;
	vertical-align: middle;
	width: 75px;
}

.minus {
	background: url(../images/module_judging/minus.gif) no-repeat;
	background-position: center;
}

.plus {
	background: url(../images/module_judging/plus.gif) no-repeat;
	background-position: center;
}

.exp_show_active {
	background-color: rgba(0, 117, 192, 1);
	border-bottom-left-radius: 0;
	border-bottom-right-radius:...

JavaScript

function expandable() {
	$('.exp_show').on('click', function(e){
		e.preventDefault();
		e.stopPropagation();
		
		var $this = $(this).parent().find('.exp_hide'),
			speed = 300;
		$(this).toggleClass('exp_show_active');
		$this.slideToggle(speed);
		$('.exp_item > .exp_hide').not($this)
		.slideUp(speed)
		.parent().find('.exp_show').removeClass('exp_show_active');

		var thisExpShowIcon = $(this).find('.exp_show_icon');
		$('.exp_show_icon').not(thisExpShowIcon).removeClass('minus').addClass('plus');

		$(this).find('.exp_show_icon').toggleClass('plus');
		$(this).find('.exp_show_icon').toggleClass('minus');
	});
}

function dropdownButton() {

	$('.score_plus').click(function() {

		var thisHideElem = $(this).children();

		$('.score_sel').not(thisHideElem).hide();
		$('.score_plus').not($(this)).removeClass('minus').addClass('plus');
		$('.score_rate').not($(this).parent()).removeClass('btn-active');

		$(this).toggleClass('plus');
		$(this).toggleClass('minus');

		$(this).parent().toggleClass('btn-active');
		$(thisHideElem).slideToggle(400);

		return false;
	});
}

function alocateScore(elem, elem2){

	var rate = 0,
		allRate = 0;

	$(elem).each(function(index, el){
		if( $(el).text() !== 'Score' ){
			rate = parseInt($(el).text());
			allRate += rate;
		}
	});

	$(elem2).text(allRate);
    calcTotal();
}

function totalScore(elem, elem2){
	var total = 0,
		oldTotal = 0;

	$(elem).each(function(index, el){
		if( $(el).text() !== 'XX' ){
			total = parseInt( $(el).text() );
			oldTotal += total;
		}
	});

	$(elem2).html(oldTotal);
}

function changeClasses(elem, elem2){

	var count = $(elem).length;
	var respCount = 0;

	$(elem).each(function(index, el){
		if( $(el).text() !== 'Score' ){
			respCount++;
		}
		if( respCount === count ){
			$(elem2).removeClass('score_started').addClass('score_complete');
			$(elem2).find('.exp_hide').removeClass('score_started').addClass('score_complete');
		} else if(count >...