Current list collapsible and parent elements selectable

Question

I am having issues making my lists interact the way I need them to. I need to keep the functionality I currently have While adding in two more key parts.
I have been unsuccessful at adding these parts without losing current functionality, or completely breaking the application.
I need to be able to select/deselect all the children elements by clicking the parent.
I need the lists to be collapsible, and When a parent has a child on the second list I need the parent's name to be above the children on that list.

If all children are off the list on the right then the parent shouldn't appear there, however the parent should always be on the left.

The issue I've really been running into is that to make it collapsible I've been trying to use check boxes, and hide the styling, but none of that worked, and you'll see why. code below.

In summary

• Collapsible Lists

• Select/Deselect all children by clicking parent

• parent id appears on left list if 1 or more children are on it.

Fiddle

HTML:

<div class="half">
<ol id="one">
    <li id="alaska">
        Alaska
        <ul>
            <li data-id="alaska"><input type="checkbox"> Children 1</li>
            <li data-id="alaska"><input type="checkbox"> Children 2</li>
            <li data-id="alaska"><input type="checkbox"> Children 3</li>
        </ul>
    </li>
    <li id="washington">
        Washington
        <ul>
            <li data-id="washington"><input type="checkbox"> Children 1</li>
            <li data-id="washington"><input type="checkbox"> Children 2</li>
            <li data-id="washington"><input type="checkbox"> Children 3</li>
        </ul>
    </li>
    <li id="texas">
        Texas
        <ul>
            <li data-id="texas"><input type="checkbox"> Children 1</li>
            <li data-id="texas"><input type="checkbox"> Children 2</li>
            <li data-id="texas"><input type="checkbox"> Children 3</li>
        </ul>
    </li>
</ol>
<button type="button" class="include">Include</button>
</div>
<div class="half">
<ol id="two"></ol>
<button type="button" class="exclude">Exclude</button>
</div>

CSS:

.half {
display:block;
float:left;
width:50%;
}

JavaScript:

$(function(){
$('.include').click(function(e){
    var $checks = $("input:checked");
    $.each($checks, function(k,v){
        var tempid = $(this).parent().data('id');
          var element = $(this).parent().detach();
            $('#two').append(element);

    });
});

$('.exclude').click(function(e){
    var $checks = $("input:checked");
    $.each($checks, function(k,v){
        var tempid = $(this).parent().data('id');
        var element = $(this).parent().detach();
        $('#one').find('#'+tempid+' ul').append(element);
    });        
  });
});

Fiddle

Answer 1

Update

Here is an updated demo https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/19/

Made few changes to .exclude method

$('.exclude').click(function(e) {
  var $checks = $("input:checked");
  $.each($checks, function(k, v) {
    var tempid = $(this).parent().data('id');
    var element = $(this).parent().detach();
    $('#one').find('#' + tempid + ' ul').append(element);
    var items = $('#two #' + tempid + '-2').children('li');
    if (items.length == 3 || items.length == 0) {
      $('#two #' + tempid + '-2-heading').hide();
    } else {
      $('#two #' + tempid + '-2-heading').show();
    }
  });
});

---

Here is a demo https://jsfiddle.net/dhirajbodicherla/hb9j8ua7/16/

Something like this should do

HTML structure would look like this

I changed it a bit to accommodate collapse and checking all children.

<li id="alaska">
  <span class="parent">Alaska</span>
  <span class="collapse">collapse</span>
  <ul>
    <li data-id="alaska">
      <input type="checkbox">Children 1</li>
    <li data-id="alaska">
      <input type="checkbox">Children 2</li>
    <li data-id="alaska">
      <input type="checkbox">Children 3</li>
  </ul>
</li>

Include script

$('.include').click(function(e) {
  var $checks = $("input:checked");
  $.each($checks, function(k, v) {
    var tempid = $(this).parent().data('id');
    var element = $(this).parent().detach();
    if (!$('#two #' + tempid + '-2').length) {
      var ol = $('<ol></ol>').attr('id', tempid + '-2');
      var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
      ol.prepend(heading);
      $('#two').append(ol);
    }
    $('#two #' + tempid + '-2').append(element);
    if ($('#two #' + tempid + '-2').children('li').length == 3) {
      $('#two #' + tempid + '-2-heading').hide();
    } else {
      $('#two #' + tempid + '-2-heading').show();
    }
  });
});

When the include button is clicked the script will create a new ordered list based on the checkboxes that are selected. The new ordered lists under #two would look like this #alaska-2. This is achieved by

if (!$('#two #' + tempid + '-2').length) { // check if alaska-2 is present
  var ol = $('<ol></ol>').attr('id', tempid + '-2');
  var heading = $('<span />').text(tempid).attr('id', tempid + '-2-heading');
  ol.prepend(heading);
  $('#two').append(ol);
}

Apart from creating a new ordered list #alaska-2 that script would add a span which would be the name of the parent and it would have an id like #alaska-2-heading.

If all the children are selected then the heading would be hidden which is achieved by this script (which is the same in exclude script too)

if ($('#two #' + tempid + '-2').children('li').length == 3) {
  $('#two #' + tempid + '-2-heading').hide();
} else {
  $('#two #' + tempid + '-2-heading').show();
}

exclude script

$('.exclude').click(function(e) {
  var $checks = $("input:checked");
  $.each($checks, function(k, v) {
    var tempid = $(this).parent().data('id');
    var element = $(this).parent().detach();
    $('#one').find('#' + tempid + ' ul').append(element);
    if ($('#two #' + tempid + '-2').children('li').length == 3) {
      $('#two #' + tempid + '-2-heading').hide();
    } else {
      $('#two #' + tempid + '-2-heading').show();
    }
  });
});

check all children

$('#one span.parent').on('click', function() {
  var checked = $(this).parent().find('input').prop('checked');
  $(this).parent().find('input').prop('checked', !checked);
});

collapse children

$('#one span.collapse').on('click', function() {
  $(this).parent().find('ul').slideToggle();
});