JSFiddle - React, Tailwind, and code Playground

by Daryl Lackey

HTML

<div id="listContainer">
        <ul class="srtable ui-sortable">
            <li class="listItem phaseItem ui-sortable-handle ui-sortable">
                
                    <div class="listItem phaseTitle ui-sortable-handle ui-sortable">
                        <i class="glyphicon weekToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="phase" id="phase_cb_1" class="ui-sortable-handle"> Phase 1
                        <div class="listItem weekItem ui-sortable-handle ui-sortable" style="">
                            
                                <div class="listItem weekTitle ui-sortable-handle ui-sortable">
                                    <i class="glyphicon dayToggle ui-sortable-handle glyphicon-chevron-down"></i> <input type="checkbox" name="week" id="week_cb_1" class="ui-sortable-handle"> Week 1
                                    <div class="listItem dayItem ui-sortable-handle ui-sortable" style="">
                                        
                                           <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_1" class="ui-sortable-handle"> Day 1</div>
                                        
                                           <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_2" class="ui-sortable-handle"> Day 2</div>
                                        
                                           <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_3" class="ui-sortable-handle"> Day 3</div>
                                        
                                           <div class="listItem dayTitle ui-sortable-handle ui-sortable"><input type="checkbox" name="day" id="day_cb_4" class="ui-sortable-handle"> Day 4</div>
                                        
                                    </div>
                ...

CSS

#listContainer {
  /*width:400px;*/
  width:100%;
}

ul {
  list-style: none;
  padding:0;
  margin:0;
}

.listItem {
    margin: 5px 0px 5px 15px;
    border: 0px;
    /*background-color: #cecece;*/
    padding: 1px;
    /*cursor: move;*/
}

.phaseItem {
  /*background: #ccc;*/
  min-height: 30px;
}

.phaseTitle {
/*  background:#abc;
  padding:10px;*/
}

.weekItem {
    /*margin: 0px 0px 0px 10px;*/
    min-height: 30px;
    /*padding: 10px;*/
}

.weekTitle {
    /*margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
    /*cursor: pointer;*/
}

.dayItem {
/*  background: #fff;
  padding:10px;*/
  min-height: 30px;
  /*margin: 0px 0px 0px 10px;*/
}

.dayTitle{
/*    margin: 0px 0px 0px 10px;
    border: 1px solid #999;
    background-color: #fff;
    padding: 5px;*/
    /*cursor: pointer;*/
}

.itemPlaceholder {
    border: 1px dashed #cecece;
    font-weight: bold;
    font-size: 45px;
    background-color: #fce77e;
    min-height:30px;
}

JavaScript

$("input[type='checkbox']").change(function () {
          $(this).siblings()
              .find("input[type='checkbox']")
              .prop('checked', this.checked);
      });