JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cont"></div>
JavaScript
$(document).ready(function() {
$('#cont').newline([]);
});
!function ($) {
"use strict"; // jshint ;_;
/* NEWLINE PUBLIC CLASS DEFINITION
* =============================== */
var Newline = function (element, options) {
this.init('newline', element, options)
}
Newline.prototype = {
constructor: Newline
, init: function (type, element, options) {
var a = this
this.type = type
this.$element = $(element)
this.$element.on( 'keyup', 'input.linegen', function(){
var $lastitem = a.$element.children().eq(-1)
if ($lastitem.find('input.linegen').val() != ''){
a.additem()
} else if ($lastitem.prev().find('input.linegen').val() == ''){
a.delitem($lastitem)
}
})
this.$element.on( 'click', '.close', function(e){
a.delitem($(e.target).parent())
})
a.makelist(options)
a.additem()
}
, makelist: function (options) {
this.$list = $([]);
for (var i=0; i<options.length; i++) {
var option = $.extend({}, $.fn.newline.defaults, options[i])
var $item = $(option.template).clone()
delete option.template
$item.data('itemOptions', option)
.find('input.linegen').val(option.description).end()
this.$list = this.$list.add($item);
}
this.$list.appendTo(this.$element)
}
, additem: function () {
var $item = $($.fn.newline.defaults.template).clone().data('itemOptions', $.fn.newline.defaults)
//delete $item.data('itemOptions').template
$item.appendTo(this.$element)
}
, delitem: function ($item) {
$item.remove()
}
}
/* NEWLINE PLUGIN DEFINITION
* ========================= */
$.fn.newline = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('newline')
, options = typeof option == 'object' && option
...