JSFiddle - React, Tailwind, and code Playground

by James Doyle

HTML

<button data-widget="text" id="addTextWidget">Add Text Widget</button>
<button data-widget="image" id="addImageWidget">Add Image Widget</button>
<button data-widget="slider" id="addSliderWidget">Add Slider Widget</button>

<ul id="widgetItems">
    
</ul>

JavaScript

var count = {
    text: 0,
    image: 0,
    slider: 0,
}
$('button').click(function() {
    var type = $(this).attr('data-widget');
    var name = $(this).html();
    var rel = 0;
    name = name.split('Add ');
    name = name[1];
    if (type == 'text') {
        count.text++;
        rel = count.text;
    } else if (type == 'image') {
        count.image++;
        rel = count.image;
    } else {
        count.slider++;
        rel = count.slider;
    }
    buildWidgetListItem(name, type, rel);
});

function buildWidgetListItem(name, type, rel) {
    var template = '<li><a href="#" rel="' + rel + '" data-type="' + type + '" >' + name + ' ' + rel + '</a></li>';
    $('#widgetItems').append(template);
    $('#widgetItems ul li a').click(function(){
        removeWidget();
    });
}

function removeWidget() {
    var rel = $(this).attr('rel');
    var name = $(this).attr('name');
    var type = $(this).attr('data-type');
    console.log(rel);
}