Input Changed Values

by JQ Purfect

HTML

<div id="mainDiv">
            <input type="text" id="sumi" value="1" />
            <input type="text" id="sumi" value="2" />
            <input type="text" id="sumi" value="3" />
            <input type="text" id="sumi" value="4" />
            <input type="text" id="sumi" value="5" />
        </div>
        
        <button id="getText">Submit</button>

CSS

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

JavaScript

/*
for (var i = 0; i < 10; i++) {
    $('<input />').attr({
        type: 'text',
        value: Math.round(Math.random() * 100)
    }).prependTo('body');
}
*/

var inputs = $('#mainDiv input[type="text"]').each(function() {
    $(this).data('original', this.value);
});

$('#getText').click(function(){
    inputs.css('background-color', function() {
        if ($(this).data('original') !== this.value) {
            return 'orange';
        } else {
            return false;
        }
    });
    
    return false;
});