JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

JavaScript

/*1. Detach html element from current parent and reattach it alongwith all event listeners to another parent, created on fly*/
/*2. Detach two elements and move <img> next to <input> and then append to new parent*/

$(".txt-add").live("keyup",function(e){
        var keyCode = e.which || e.keyCode;

        //$ pressed
        if(keyCode == 52) {
            var valueofinput = $(this).val();
            valueofinput = valueofinput.substring(0, --valueofinput.length);
            valueofinput = valueofinput.charAt(0).toUpperCase() + valueofinput.slice(1, valueofinput.length); //title casing

            var oldParentElem = $(this).parent("span");
            $(oldParentElem).prepend('<input type="checkbox" checked data-bind="visible:enabled,checked:enabled_tmp"><span class="tag">' + valueofinput + '</span><span class="delete" data-bind="visible:!enabled ||isNew,click: function(data,event) { $parent.removeValidValue($index(),data); }">&nbsp;x</span>');
            $(oldParentElem).addClass("value-tag");
            $(this).val("");

            var imgTag = $(this).siblings("img").detach();
            var newElem = $("<span></span>").prepend($(this).detach());
            $(newElem).find("input").after(imgTag);
            $(oldParentElem).after(newElem);
        }
    });