недавно решал, такую задачу, вот вам пример!
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
</head>
<body>
<script>
var w = 5, s = w, arr=[], i=[];
while (w--) {
document.body.insertAdjacentHTML('beforeend', '<span class="prev">[«< prev]</span><span class="next">[next »>]</span><br><input type="text"><br>');
arr.push([]);
i.push(0);
}
var inp=document.querySelectorAll('input'), prev = document.querySelectorAll('.prev'), next = document.querySelectorAll('.next');
while (s--) {
inp[s].addEventListener('input',haOne(s),false);
prev[s].addEventListener('click',haWho(s),false);
next[s].addEventListener('click',haThr(s),false);
}
function haOne(s){
return function (e) {
arr[s].push(this.value);
i[s]=arr[s].length-1;
};
}
function haWho(s){
return function (e) {
if (i[s] <= arr[s].length && i[s]) i[s]--;
inp[s].value=arr[s][i[s]];
};
}
function haThr(s){
return function (e) {
if (i[s] < arr[s].length-1 && i[s]>=0) i[s]++;
inp[s].value=arr[s][i[s]];
};
}
</script>
</body>
</html>
</body>
</html>