JSFiddle - React, Tailwind, and code Playground

by fiddleyetu

HTML

<div id="mainDiv">
    <input type="text" id="myID1" class="someclass" value="1" />
    <input type="text" id="myID2" class="someclass" value="2" />
    <input type="text" id="myID3" class="someclass" value="3" />
    <input type="text" id="myID4" class="someclass" value="4" />
    <input type="text" id="myID5" class="someclass" value="5" />
    <div class="out"></di>
</div>
<button id="getText">Submit</button>

CSS

input, button {
    display: block;
    padding: 5px;
    margin: 10px;
    border: 1px solid #ddd;
    background: #F2F2F2
}

JavaScript

$('#mainDiv > .someclass').each(function () {
    $(this).data('somevalue', $(this).val());
});

var out = $('div.out');
$('#getText').click(function () {
    var msg = 'You haven\'t saved your changes.';
    var isTrue = false;
    out.empty();
    $('#mainDiv > .someclass').each(function () {
        if ($(this).data('somevalue') != $(this).val()) {
            isTrue = true;
            // Display only changed items on console ...
            console.log( $(this).data('somevalue') + ' changed to ' + this.value );
        }
    });
    isTrue && out.html( msg );   
});