逐步撤消窗体的历史记录

我正在寻找关于如何为表单实现逐步撤消的帮助/想法。我已经能够做到一个撤消事件，但我不知道如何更进一步。

在我的示例中，用户正在制作排序列表。他们选择自己的商品：

<input type="checkbox" id="food1">Bread<br>
<input type="checkbox" id="food2">Milk<br>
<input type="checkbox" id="food3">Juice<br>
<input type="checkbox" id="item1">Paper<br>
<input type="checkbox" id="item2">Pencils<br>
<input type="checkbox" id="item3">Eraser<br>

出现在框中：
<textarea id="text" rows="10" cols="25"></textarea>

该列表使用以下脚本生成：

// variable literals
foodtype = {
    food1: "Bread'n",
    food2: "Milk'n",
    food3: "Juice'n"
};
itemtype = {
    item1: "Paper'n",
    item2: "Pencils'n",
    item3: "Eraser'n"
};
// new text
var textbox = $('#text').val();
// old text to revert to
var oldtext = '';
// temporary holder for checkbox id
var choice = null;
// fill textarea with list
function filltext1() {
    if (choice !== null) {
        if (choice.indexOf('food') != -1) {
            textbox += foodtype[choice] + '';
            choice = null;
            $('#text').val(textbox);
        } else if (choice.indexOf('item') != -1) {
            textbox += itemtype[choice] + '';
            choice = null;
            $('#text').val(textbox);
        }
    }
}
// add new selection to list, unless unchecked
$('input:checkbox').change(function () {
    if ($(this).is(':checked')) {
        choice = $(this).attr('id');
        oldtext = textbox;
        filltext1();
    } else {
        $('#text').val(oldtext); // if unchecked, textarea = prior text
        textbox = oldtext; // reset variable to prior text
    }
});

最后一点是我的文本框，如果项目未选中，则返回一步。但是，只有当您取消选中最近的选择时。

异步取消复选框不会删除该项目的条目，而是删除最后一个选择。

如何将初始选择链接到可以恢复的状态？或者换言之，有没有一种方法可以异步撤消项目在列表中的条目？如果这就是全部可能的话，我甚至会对顺序撤消感到高兴。

我很感激你的帮助！