JSFiddle - React, Tailwind, and code Playground

by jnbdz

HTML

<script src="https://github.com/jnbdz/listManager/raw/master/Source/listManager.js"></script>
<script src="https://github.com/jnbdz/searchFilters/raw/master/Source/searchFilters.js"></script>
<button>Add filter</button><button>Remove all filters</button>
<div id="filters"></div>

CSS

body {
     margin-top: 50px;
 }
 
form {
    
}

 ul {
     list-style: none;
     margin: 0;
     padding: 0;
 }
 
 .listmanager-row {
     height: 30px;
     border: 1px solid #000;
 }
 
 .listmanager-row span {
     display: block;
     float: left;
     margin: 5px;
 }
 
 .listmanager-add-row, .listmanager-remove-row {
     display: block;
     float: right;
     color: #000;
     text-decoration: none;
     margin: 5px;
 }

.searchfilters-filtercontrolsel {
    display: inline;
}

JavaScript

var list = new searchFilters('filters', {
    'action': 'index.php',
    'filters': {
        "column": {"type": "text", "title": "Column"},
        "title": {"type": "text", "title": "Title"},
        "content": {"type": "text", "title": "Content"},
        "tag": {"type": "text", "title": "Tag"},
        "protected": {"type": "bool", "title": "Protected"},
        "status": {"type": "text", "title": "Status"},
        "created_date": {"type": "date", "title": "Created date"},
        "modify_date": {"type": "date", "title": "Modify date"}
    }
 });
 
 var rowContent = function() {

     var removeButton = new Element('a', {
         'href': '#',
         'class': 'listmanager-remove-row',
         'html': '-',
         'events': {
             'click': function(el) {
                 list.remove(el);
             }
         }
     });
 
     var addButton = new Element('a', {
         'href': '#',
         'class': 'listmanager-add-row',
         'html': '+',
         'events': {
             'click': function(el) {
                 list.add({
                     'rowHTML': rowContent(),
                     'target': document.id(el.target).getParent('.listmanager-row')
                 });
             }
         }
     });
    
     return [addButton, removeButton];
    
 };
 
 $$('button')[0].addEvent('click', function() {
     list.add({
         'rowHTML': rowContent()
     });
 });
 
 $$('button')[1].addEvent('click', function() {
     list.removeAll();
 });