Edit in JSFiddle

var timeoutId,
    saveData = {};

// Function to save all ratings that were changed.
function saveRatings() {    
    
    // Iterate over all properties on our saveData object and populate them with data from element.
    for (var key in saveData) {
        // Get reference to element we stored on saveData object.
        var $rating = saveData[key];
        // Replace value on saveData object with the current element value.
        saveData[key] = $rating.val();
        // Change color on text box to show it was saved.
        $rating.css({
            backgroundColor: '#cfc'
        });
    }
    // Log saveData object to console, this is the object that would go to server as part of ajax call.
    console.log(saveData);
    saveData = {};
}

// Handle keypress event.
$('.rating').keypress(function (e) {
    var $currentRating = $(this);
    
    $currentRating.css({
        backgroundColor: '#fcc'
    });
    
    // Set property on saveData object and set it equal to the current jQuery element.
    saveData[$currentRating.attr('id')] = $currentRating;
    
    // If a timer was started, clear it because they are still pressing keys like a monkey.
    if (timeoutId) clearTimeout(timeoutId);
    
    // Start a timer that will fire save when finished.
    timeoutId = setTimeout(saveRatings, 750);
});

<h3>Rate each product (1-10)</h3>
<div class="red">red = unsaved changes</div>
<div class="green">green = saved changes</div>
<br />
How would rate product 01? <input id="rating1" type="text" class="rating" /><br />
How would rate product 02? <input id="rating2" type="text" class="rating" /><br />
How would rate product 03? <input id="rating3" type="text" class="rating" /><br />
How would rate product 04? <input id="rating4" type="text" class="rating" /><br />
How would rate product 05? <input id="rating5" type="text" class="rating" /><br />
How would rate product 06? <input id="rating6" type="text" class="rating" /><br />
How would rate product 07? <input id="rating7" type="text" class="rating" /><br />
How would rate product 08? <input id="rating8" type="text" class="rating" /><br />
How would rate product 09? <input id="rating9" type="text" class="rating" /><br />
How would rate product 10? <input id="rating10" type="text" class="rating" /><br />
How would rate product 11? <input id="rating11" type="text" class="rating" /><br />
How would rate product 12? <input id="rating12" type="text" class="rating" /><br />
How would rate product 13? <input id="rating13" type="text" class="rating" /><br />
How would rate product 14? <input id="rating14" type="text" class="rating" /><br />
How would rate product 15? <input id="rating15" type="text" class="rating" /><br />
How would rate product 16? <input id="rating16" type="text" class="rating" /><br />
How would rate product 17? <input id="rating17" type="text" class="rating" /><br />
How would rate product 18? <input id="rating18" type="text" class="rating" /><br />
How would rate product 19? <input id="rating19" type="text" class="rating" /><br />
How would rate product 20? <input id="rating20" type="text" class="rating" /><br />

.rating { width: 50px; text-align: center;}
.red { color: #f00; }
.green { color: #0a0; }