JSFiddle - React, Tailwind, and code Playground

by likestothink

HTML

<div class="action add" data-type="file-delete">Add Option (Delete)</div>
    <div id="files_wrapper">Stuff in here</div>

CSS

.action { border: 1px solid red; width: 150px;}

    #files_wrapper { border: 1px dotted grey; min-height: 50px;}

    .clicked { color: green;}

JavaScript

// Find your application section
    var app = $('#files_wrapper');

    // Make an element to clone
    var deleteFile = $('<div>').addClass('action delete').html('Delete file');

    // Find your trigger that adds the button
    $('.action.add[data-type="file-delete"]').on('click.fileaction', function () {
    	// Clone your template button
      var deleteButton = deleteFile.clone();

			// Add your listener that reponds to the delete button being pressed
      deleteButton.on('click.delete-file', function () {
        $(this).toggleClass('clicked')
      })

			// Add it to the application
			app.append(deleteButton)

		})