将JavaScript与HTML.BeginCollectionItem结合使用

Question

我在销售礼品盒的网站上使用HTML.BeginCollectionItem。我正在使用它来允许用户向订单添加多个礼品盒。

用户在第一行选择一个图像，该图像将添加到其框中。该项目的ID也将添加到隐藏字段以进行表单处理。该产品的图像也会变灰并被禁用，因此无法再次添加。如果他们单击框中已经存在的项目，则会将其删除并返回到顶部列表。

正如您在下面看到的，我已经在框中添加了两个项目，并且它们在顶部菜单中已显示为灰色：

以下是控制该行为的JavaScript：

<script type="text/javascript">

    function changeImage(src, id, desc) {
        if (document.getElementById(id).className != "added") {
            for (var i = 1; i <= 5; i++) {
                if (document.getElementById("empty" + i).className != "item-full") {
                    document.getElementById("empty" + i).innerHTML = "<img src='" + src + "' width='60' height='60' id='"+id+"' onClick='removeImage(" + i + ")'/>";
                    document.getElementById("empty" + i).className = "item-full";
                    document.getElementById(id).className = "added";
                    document.getElementById("image-" + id).className = "image-inactive";
                    document.getElementById("Item" + i).value = id;
                    break;
                }
            }
        } 
    }

    function removeImage(x) {
        var e = document.getElementById("empty" + x).childNodes[0].id;
        document.getElementById("image-" + e).className = "image-active";
        document.getElementById(e).className = "available";
        document.getElementById("empty" + x).innerHTML = "<img src='../../Content/images/white.jpg' width=60 height=60 border=0 onClick='removeImage(" + x + ")'/>";
        document.getElementById("empty" + x).className = "empty-item";
    }

</script>

所有这些对于一个盒子都可以正常工作。当他们添加第二个框时，在该框的潜在产品列表上的任何点击都只会在第一行上将它们显示为灰色。因此，第二个（及以后）包装盒的产品菜单和包装盒不受影响。

我认为这里的解决方案是获取HTML.BeginCollectionItem分配给每个项目的GUID，并在JavaScript函数中使用它，但是我不确定如何获取该GUID。

感谢您提供的任何见解！