JSFiddle - React, Tailwind, and code Playground

by bouillard

HTML

<link rel="stylesheet" href="http://bouillard.org/_libs/jquery-ui-1.8.17/css/redmond/jquery-ui-1.8.17.css">
<input id="editPhotos" type="checkbox"><label for="editPhotos">Edition</label>

<div id="photoList">
    <span>element 1</span>
    <span>element 2</span>
</div>


<ul id="template">
    <li class="ui-widget-content">
      <table>
        <tr>
          <td class="title"></td>
          <td><button class="removePhoto">Remove</button></td>
        </tr>
      </table>
    </li>
</ul>

JavaScript

$('input#editPhotos').button().on("change",function(){
    if (this.checked) {
      var ph = $('#photoList>*');
      var ul = $('<ul>').appendTo('#photoList');
      ph.each(function() {
        var li = $('#template>li').clone(true);
        $('.title',li).text($(this).text());
        li.appendTo(ul).show();
        $(this).remove();
      });
    } else {
      $('#photoList li').each(function(){
       $('<span>').text($('.title',this).text()).appendTo('#photoList');
          $(this).remove();
      });
      $('#photoList ul').remove();
    }
  });

  $('#template button.removePhoto').button({
    icons: {primary: "ui-icon-trash"},
    text:false
  }).click(function() {
      alert('tada...');
  });

  $('#template').hide();