在for循环中使用socket.on时，数据将附加到for循环中的最后一个HTML。我怎么了

Question

这是我要运行的代码-

$(document).ready(function(){
            var socket = io({
                transports: ['websocket'],
                upgrade: false
            });
            socket.on('start', function (cou) {
                var newHTML =  '';
                var divSocket;
                for (var i = 0; i < cou.length; i++) {
                    newHTML += '<li class="small"><div class="thumbnail">'+
                        '<div class="tools"><button class="btn btn-small snapmail" data-num="/cam'+i+'" type="button rel="'+
                        'data-original-title="Snap &amp; Mail"><i class="icon-camera"></i></button><a class="btn btn-small gallery"'+
                        'href="/cam'+i+'" data-num="/cam"'+i+'"><i class="icon-th"></i></a></div>';
                    var img = '<img id="/cam'+i+'" class="small">';
                    newHTML += img+'</div><span class="label label-custom">U.K.</span></li>';
                };
                $('#grid').html(newHTML);
                for (var i = 0; i < cou.length; i++) {
                    var image = document.getElementById('/cam'+i);
                    divSocket = io(location.origin + '/cam'+i);
                    divSocket.on('data', function (data) {
                        var bytes = new Uint8Array(data);
                        image.src = 'data:image/jpeg;base64,' + bytes;
                    });
                };
            });
        });

运行此代码后，所有数据都将附加到最后一个HTML。 我要去哪里错了？