{#css ui/LinkedList/LinkedList.css #}

<div class="bg-cover"
  style="background-image:linear-gradient(to right, rgba(132,204,22,0.7), rgba(22,163,74,0.7))"
  data-md-skip
></div>

<div id="linkedlist-demo" data-md-skip>
  <div>
    <label>Known Mutants</label>
    <LinkedList id="linkedlist-demo-list1" linked_to="linkedlist-demo-list2">
      <li><input type="checkbox" name="users" value="1" />
        Alexander Summers</li>
      <li><input type="checkbox" name="users" value="2" />
        Alison Blaire</li>
      <li><input type="checkbox" name="users" value="3" />
        Anna Marie LeBeau</li>
      <li><input type="checkbox" name="users" value="4" />
        Charles Francis Xavier</li>
      <li><input type="checkbox" name="users" value="5" />
        Elizabeth Braddock</li>
      <li><input type="checkbox" name="users" value="6" />
        Emma Grace Frost</li>
      <li disabled><input type="checkbox" name="users" value="7" disabled />
        Erik Magnus Lehnsherr</li>
      <li><input type="checkbox" name="users" value="8" />
        Henry Philip McCoy</li>
      <li><input type="checkbox" name="users" value="9" />
        James Howlett</li>
      <li><input type="checkbox" name="users" value="10" />
        Jean Elaine Grey</li>
      <li><input type="checkbox" name="users" value="11" />
        John Proudstar</li>
      <li><input type="checkbox" name="users" value="12" />
        Jubilation Lee</li>
      <li><input type="checkbox" name="users" value="13" />
        Katherine Anne Pryde</li>
      <li><input type="checkbox" name="users" value="14" />
        Kurt Wagner</li>
      <li><input type="checkbox" name="users" value="15" />
        Lucas Bishop</li>
      <li><input type="checkbox" name="users" value="16" />
        Nathan Summers</li>
      <li><input type="checkbox" name="users" value="17" />
        Ororo Munroe</li>
      <li><input type="checkbox" name="users" value="18" />
        Piotr Nikolaievitch Rasputin</li>
      <li><input type="checkbox" name="users" value="19
        Rachel Anne Summers</li>
      <li><input type="checkbox" name="users" value="20" />
        Raven Darkhölme</li>
      <li><input type="checkbox" name="users" value="21" />
        Remy Etienne LeBeau</li>
      <li><input type="checkbox" name="users" value="22" />
        Robert Louis Drake</li>
      <li><input type="checkbox" name="users" value="23" />
        Roberto da Costa</li>
      <li><input type="checkbox" name="users" value="24" />
        Scott Summers</li>
      <li><input type="checkbox" name="users" value="25" />
        Sean Cassidy</li>
      <li><input type="checkbox" name="users" value="26" />
        Shiro Yoshida</li>
      <li><input type="checkbox" name="users" value="27" />
        Warren Worthington III</li>
    </LinkedList>

    <button
      type="button"
      class="select-all"
      onclick="document.getElementById('linkedlist-demo-list1').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
    >
      Select all &raquo;
    </button>
  </div>
  <div>
    <label>X-Men</label>
    <LinkedList id="linkedlist-demo-list2" linked_to="linkedlist-demo-list1" active>
    </LinkedList>

    <button
      type="button"
      class="remove-all"
      onclick="document.getElementById('linkedlist-demo-list2').dispatchEvent(new CustomEvent('jxui:linked:sendall'));"
    >
      &laquo; Remove all
    </button>
  </div>
</div>