JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<div id="tags" style="border:none">
    <span class="tag" id="4" style="padding-left:20px;margin-left:20px"></span>
    <input type="text" id="inptags" value="" placeholder="Add ur 6 main skills (enter ,)" style="padding-left:20px;margin-left:20px" />
</div>


<input type="button" onclick="showJson()" value="Show tags" />

JavaScript

$(function () {
            $('#tags input').on('focusout', function () {
                var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters
                if (txt) {
                    $(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
                }
                this.value = "";
            }).on('keyup', function (e) {
                // if: comma,enter (delimit more keyCodes with | pipe)
                if (/(188|13)/.test(e.which)) $(this).focusout();
                if ($('#tags span').length == 8) {
                    document.getElementById('inptags').style.display = 'none';
                }
            });
            $('#tags').on('click', '.tag', function () {
                $(this).remove();
                document.getElementById('inptags').style.display = 'block';
            });
        });


function fun() 
   {
       var div = document.getElementById("tags");
                var spans = div.getElementsByTagName("span");
       for (var i = 0; i < v.length; i++) 
                {
                    v[i].axis = spans[i].innerHTML;
                    v[i].value = parseFloat(v[i].value).toFixed(0);
                    v[i].order = v[i].order
       
                }
                return v;
   }


function showJson()
{
window.alert(JSON.stringify(fun()));
}