JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<div id="unvolitive">
<input type="text" class="hexen" id="Text1"/>
<input type="text" class="hexen" id="Text2"/>
<input type="text" class="hexen" id="Text3"/>
<input type="text" class="hexen" id="Text4"/>
<input type="text" class="hexen" id="Text5"/>
</div>

JavaScript

$(document).ready(function () {
    $('.hexen').after('<div class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="width: 20px; background: #c00; height:20px;"></div><br />') // ui icon
    .keypress(function () {
        $(this).next('.saveButton').show(); //appends ui icon
    });

    $('.saveButton').hide()
        .click(function () {
            $(this).hide(); // removes ui icon on click
            var id;
            var $input = $(this).prev('.hexen');
            if ($input.val() !== '') {
                id = $input.attr('id');
            }
            console.log(id);
    });

    $('.ui-state-default').hover(
        function () {
        $(this).addClass('ui-state-hover');
        }, function () {
            $(this).removeClass('ui-state-hover');
        } //ui icon hover
    );
});


/*
$.ajax({
    type: "POST",
    url: "Default.aspx",
    data: "{Id: " + $(".hexen").attr('id') + ", Value: " + $(".hexen").val() + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        console.log(data);
    }
}); */