How can use css in jquery when shuffling a drag and drop

I made a “choose and reorder” module in which we drag and drop the options if the options are arranged in correct order then it will show button along with it that this is correct(shown in the figure) https://www.screencast.com/t/n8u5M0akkJd

I have made two button review or correct answer for showing correct sequence or correct answer but my button can not fix after review my answer

function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
        let j = Math.floor(Math.random() * (i + 1));
        let temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}
let question = {
    name: "Sort",
    options: ["A sentence is a set of words that in principle tells a complete thought,", "although it may make little sense taken in isolation out of context.", "Typically a sentence contains a subject and predicate."],
    correctSeq: "1,2,3"
};
let is_answer_correct = false;
let correct_html = "";
let current_html = "";

function init() {
    let list_html = [];
    let li_class = ['first', 'second', 'third'];
    for (let i = 0; i < question.options.length; i++) {
        let li_html = '<li class="ui_color" id="item_' + i + '" cseq="' + i + '" useq=""><a class="' + li_class[i] + '"><span class="number"></span>' + question.options[i] + '</a></li>';
        list_html.push(li_html);
    }
    correct_html = createHTML(list_html, false);
    createHTML(list_html, true);
}
function createHTML(list_html, is_shuffle) {
    $('.header').find('span').text(question.name);
    if (is_shuffle) {
        var list_html = shuffle(list_html);
    }
    let list_html_str = list_html.join('');
    if (is_shuffle) {
        $('ul').append(list_html_str);
    } else {
        return list_html_str;
    }
}
$(function() {
    init();
    $("#sortable").sortable({
        revert: true
    });
    $("#draggable").draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $("ul,li").disableSelection();
    $("#sortable").sortable({
        revert: true,
        update: function(event, ui) {
            let x = evalAns();
        }
    });

});
function evalAns() {
    let seq = 0;
    $(".ui_color").each(function() {
        $(this).attr('useq', seq);
        seq++;
        $(this).find('.number').html(+$(this).attr('useq') + 1);
        let is_correct = $(this).attr('useq') == $(this).attr('cseq');
        is_answer_correct = is_correct;
    });
}
function reviewAnswer(is_correct) {
    let btnui = {
        incorrecet: ['wrong', 'Wrong'],
        correct: ['right', 'Correct']
    };
    console.log(btnui);
    if (typeof is_correct == 'undefined' && $('#review').attr('correct') == 1) {
        $('ul').html(current_html);
        $('#review').attr('correct', 0);
        console.log(review);
    }
    $(".ui_color").each(function() {
        let is_correct = $(this).attr('useq') == $(this).attr('cseq');
        let btn_css = is_correct ? btnui.correct : btnui.incorrecet;
        $(this).find('button').remove();
        $(this).append('<button type="button" class="' + btn_css[0] + '">' + btn_css[1] + '</button>');
    });
    let is_correct_ans = is_correct || is_answer_correct;
    let res_ui = is_correct_ans ? btnui.correct : btnui.incorrecet;
	$('.first_right').html('').append('<button type="button" class="' + res_ui[0] + '">' + res_ui[1] + '</button>')
	$('.result').html('').append('<button type="button" class="' + res_ui[0] + '">' + res_ui[1] + '</button>')	
	$('.third_result').html('').append('<button type="button" class="' + res_ui[0] + '">' + res_ui[1] + '</button>')
	}

function correctAnswer() {
    current_html = $('ul').html();
    $('ul').html(correct_html);
    $(".ui_color").each(function() {
        $(this).attr('useq', $(this).attr('cseq'));
    });
    $('#review').attr('correct', 1);
    reviewAnswer(true);
}
ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0;
    margin-bottom: 10px; 
 }
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
.result
{
	position: relative;
    bottom: 5em;
    left: 14em;
}
.ui_color { 
    margin: 5px; 
    padding: 5px; 
    width: 570px; 
    height: 47px;
    background-color: #46B8DA;
    border: 1px solid #c5c5c5;
    font-weight: normal;
    color: #454545;
}
.header
{
    border: 1px solid black;
    width: 569px;
    height: 37px;
    padding: 17px 0 0 11px;
    margin-left: 6px;
}
.bottom{
    display: inline;
    float: none;
    padding: 0px 6px 1px 6px;
    position: relative;
    bottom: 7em;
    left: 14em;
}
.tablelike
{
	height: 368px;
}
.full_border
{
    border: 1px solid #800080;
    width: 592px;
}
.first_right
{
	background: #008000;
    position: relative;
    left: 55%;
    top: 7px;
    color: #fff;
    border: 1px solid #008000;
    width: 90px;
    height: 31px;
	box-shadow: 3px 6px 5px #888888;
}
.third_right
{	
	background: #008000;
    position: relative;
    left: 30px;
    bottom: 7px;
    color: #fff;
    border: 1px solid #008000;
    width: 90px;
    height: 31px;
	box-shadow: 3px 6px 5px #888888;
}
.right {
	background: #008000;
    position: relative;
    left: 20px;
    top: 7px;
    color: #fff;
    border: 1px solid #008000;
    width: 90px;
    height: 31px;
	box-shadow: 3px 6px 5px #888888;
}
.wrong{
	background: #b20000;
    position: relative;
    left: 20px;
    top: 7px;
	border: 1px solid #b20000;
	width: 90px;
    height: 31px;
    color: #fff;
	box-shadow: 3px 6px 5px #888888;
}
.first
{
	padding: 0px 115px 0px 0px;
}
.second
{
	padding: 0px 15px 0px 0px;
}
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Draggable + Sortable</title>
	<link rel="stylesheet" target="_blank" rel="nofollow" href="jq.css" type="text/css"/>
	<link rel="stylesheet" target="_blank" rel="nofollow" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
	<script src="jq_assingment.js"></script>
</head>	
<body>
	<form name="drag_drop" id="drag_drop" class="full_border">
		<div class="header">
			<span id="draggable" class="border">Choose & Re-order</span>
		</div>
		<div>   
			<ul id="sortable" class="tablelike">
			</ul>
		</div>  
		<div class="result">
		</div>
		<div>
			<button type="button" onclick="reviewAnswer()" correct="0" id="review">Review</button>
			<button type="button" onclick="correctAnswer()">Correct answer</button>
		</div>
		<div id="demo"></div>
	</form> 
</body>	
</html>

. when I applying CSS but is not working. Kindly suggest me what can I do



I think this code is useful for you.