JSFiddle - React, Tailwind, and code Playground

List

by Dave

HTML

<input type="text" class="input_A" id="title_input" style="width:300px">
<input type="text" class="input_A" id="year_input" style="width:30px">
S<input type="text" class="input_A" id="season_input" style="width:20px">
E<input type="text" class="input_A" id="episode_input" style="width:20px">
<button id="updEl" onclick="updateElement()" disabled>Update</button>
<button onclick="newElement()">Add</button>
<button id="delEl" onclick="deleteListEl()" disabled>Remove</button>


<br>
<br>
<br>
    <div class="wrapper">
<ul class="xxx" id="xxx">
<li data-title="About" data-year="2006" data-season="02" data-episode="08">About (2006) S02E08</li>
<li data-title="dfg" data-year="2005" data-season="08" data-episode="44">dfg (2005) S08E44</li>
<li data-title="iiuu" data-year="2055" data-season="44" data-episode="4">iiuu (2055) S044E04</li>
<li data-title="vbbn" data-year="2056" data-season="04" data-episode="18">vbbn (2056) S04E18</li>
<li data-title="ggg" data-year="2506" data-season="03" data-episode="01">ggg (2506) S03E01</li>
</ul>
    </div>
<script>
//
function deleteListEl(){
//var checkBlankState=checkBlank();
  //if (checkBlankState === '1') {
    //alert("You must select something to delete!");
  //}else{
//var text = $('.selected').text();

    if (confirm("Are you sure you want to delete?\n\n"+$('.selected').text()) == true) {
        $('.selected').remove();
        $('.input_A').val('');
        document.getElementById("delEl").disabled = true;	//disable remove button
        document.getElementById("updEl").disabled = true;	//disable update button

    } else {
        //txt = "You pressed Cancel!";
    }
//}

}

function updateElement(){
var checkBlankState=checkBlank();
  if (checkBlankState === '1') {
    alert("All fields must be filled!");
  }...

CSS

.xxx li {
list-style-image: url('http://www.sddot.com/Img/PathSeperator2.jpg');
border: 1px solid #000;
}
.xxx li:nth-child(even) {
background-color: #dddddd;
}
.xxx li:hover {
background-color: #a6a6a6;
}
.xxx {
background-color: #f2f2f2;
width:300px;
}
.xxx li:active {
background-color: #8c8c8c;
}

JavaScript

sortList()
$(document).on('click', '.xxx li', function(e){
      $('.xxx li').each(function() {
        $('.xxx li').css('border','1px solid #000')
        $('.xxx li').removeClass('selected')
    });
$(this).css('border','1px solid red');
$(this).addClass('selected');
//var text = $(this).text();
//alert($(this).text());
document.getElementById("title_input").value = $(this).data('title');
document.getElementById("year_input").value = $(this).data('year');
document.getElementById("season_input").value = $(this).data('season');
document.getElementById("episode_input").value = $(this).data('episode');
document.getElementById("delEl").disabled = false;
document.getElementById("updEl").disabled = false;



});