JSFiddle - React, Tailwind, and code Playground

list2

by Dave

HTML

<!---->
<div id="tvSeries_content">
  <div id="tvS_list_rep" class="tvS_list">
    zzz
</div>
  <div id="tvS_list_mon" class="tvS_list">
    <div class="tvS_list_A">
      <div class="tvS_LA_li" data-tvS_tit_id="Sample1" data-tvS_yer_id="2010" data-tvS_sea_id="05" data-tvS_epp_id="12" data-tvS_tit_info="123"><div id="tvS_title" data-tvS_id="t"></div>Sample1</div>
      <div class="tvS_LA_li" data-tvS_tit_id="Sample2" data-tvS_yer_id="2012" data-tvS_sea_id="05" data-tvS_epp_id="12" data-tvS_tit_info="123"><div id="tvS_title" data-tvS_id="x"></div>Sample2</div>
    </div>
</div>
  <div id="tvS_list_wed" class="tvS_list">
    <div class="tvS_list_A">
      <div class="tvS_LA_li" data-tvS_tit_id="Sample" data-tvS_yer_id="2012" data-tvS_sea_id="05" data-tvS_epp_id="12" data-tvS_tit_info="123"><div id="tvS_title" data-tvS_id="x"></div>Sample</div>
      <div class="tvS_LA_li" data-tvS_tit_id="Samplez" data-tvS_yer_id="2012" data-tvS_sea_id="05" data-tvS_epp_id="12" data-tvS_tit_info="vghfjgdjj ghj"><div id="tvS_title" data-tvS_id="x"></div>Samplez (2012)_S05E12</div>
      
      <div class="tvS_LA_li" data-tvS_tit_id="Sample" data-tvS_yer_id="2010" data-tvS_sea_id="01" data-tvS_epp_id="02" data-tvS_tit_info=""><div id="tvS_title" data-tvS_id="x"></div>Sample</div>
    </div>
  </div>

  <div id="tvSeries_footer">
  </div>
<div id="tvS_Butrep" class="tvS_DayBut" data-tvS_epp_day="rep">Report</div>
<div class="tvS_DayBut" data-tvS_epp_day="mon">Monday</div>
<div class="tvS_DayBut" data-tvS_epp_day="wed">Wednesday</div>
<!---->
<br><input type="text" class="tvS_input_A" id="tvS_title_input" style="width:300px">
<input type="text" class="tvS_input_A" id="tvS_year_input" style="width:40px">
S<input type="text" class="tvS_input_A" id="tvS_season_input" style="width:20px">
E<input type="text" class="tvS_input_A" id="tvS_episode_input" style="width:20px">
<input type="checkbox" id="tvS_updateCheck"><br>
<div id="tvS_info" contenteditable="true"></div>
<div id="tvS_DeleteBut"...

CSS

/**/
#tvS_title::before {
  content: "\200B";
}  
#tvSeries_content {
  height: 200px;
  border: 1px black solid;
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
.tvS_list {
  height: 195px;
  overflow: auto;
  background-color: #d1d1e0;
  display:none;
}
#tvS_list_rep {
  display:block;
  cursor: default;
}
.tvS_LA_li {
  cursor: default;
}
.tvS_LA_li:hover {
  box-shadow: inset 1px 1px 1px 1px #0066ff;
}/**/
.tvS_selTit {
  box-shadow: inset 1px 1px 1px 1px #0066ff;
}
div.tvS_list_A div:nth-of-type(even)
{
  background-color: #dddddd;
}
[data-tvS_id="x"] {
  display: inline-block;
  width: 10px;
  background-color: red;
}
[data-tvS_id="t"] {
  display: inline-block;
  width: 10px;
  background-color: green;
}
#tvSeries_footer {
  height: 5px;
  background-color: #000;
}
.tvS_DayBut {
  border: 1px black solid;
  background-color: #fff;
  display: inline-block;
  }
#tvS_info {
    -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
  width: 300px;
  height: 100px;
  border: 1px black solid;
  background-color: #fff;
  display: inline-block;
  }
#tvS_Butrep {
  color:#fff;
  background-color: #000;
}
#tvS_SaveBut {
  border: 1px black solid;
  background-color: #fff;
  display: inline-block;
  }
#tvS_DeleteBut {
  border: 1px black solid;
  background-color: #fff;
  display: inline-block;
  }

JavaScript

//onload
$('.tvS_input_A').val('');
$('#tvS_updateCheck').prop('checked' , false)
$('#tvS_info').html('');
$('#tvS_SaveBut').css({'pointer-events':'none','opacity':'.500'});
$('#tvS_DeleteBut').css({'pointer-events':'none','opacity':'.500'});
//
$(".tvS_DelBut").click(function() {

$(".tvS_selTit").remove();
$('.tvS_input_A').val('');
$('#tvS_updateCheck').prop('checked' , false)
$('#tvS_info').html('');
$('#tvS_SaveBut').css({'pointer-events':'none','opacity':'.500'});
$('#tvS_DeleteBut').css({'pointer-events':'none','opacity':'.500'});
});
//
$(".tvS_SavBut").click(function() {
alert("ert")
    $('.tvS_selTit').attr('data-tvS_tit_id',$('#tvS_title_input').val());
    $('.tvS_selTit').attr('data-tvS_yer_id',$('#tvS_year_input').val());
    $('.tvS_selTit').attr('data-tvS_sea_id',$('#tvS_season_input').val());
    $('.tvS_selTit').attr('data-tvS_epp_id',$('#tvS_episode_input').val());
    $('.tvS_selTit').attr('data-tvS_tit_info',$('#tvS_info').html());
    //#tvS_updateCheck
    if ($('#tvS_updateCheck').is(":checked")) {
    $('.tvS_selTit').children('div').attr('data-tvS_id','t');
    //$(this).children('div').attr('data-tvS_id')
    } else {
    $('.tvS_selTit').children('div').attr('data-tvS_id','x');
    }
});
//
$(".tvS_DayBut").click(function() {
     //
     $(".tvS_DayBut").css({color:"#000", backgroundColor: "#fff"});
     $(this).css({color:"#fff", backgroundColor: "#000"});
     //
     //$('.tvS_LA_li').css("box-shadow","0px 0px 0px 0px");
     $('.tvS_input_A').val('');
     $('#tvS_updateCheck').attr('checked' , false)
     $('#tvS_info').html('');
     $(".tvS_LA_li").removeClass('tvS_selTit');
    //
     $(".tvS_list").hide();
     $(this).attr("data-tvS_epp_day")
     $("#tvS_list_" + $(this).attr("data-tvS_epp_day")).show();
     $('#tvS_updateCheck').prop('checked' , false)
     $('#tvS_SaveBut').css({'pointer-events':'none','opacity':'.500'});
     $('#tvS_DeleteBut').css({'pointer-events':'none','opacity':'.500'});
    ...