DOM socket.io data

routes/index.js
=====================

/* GET home page. */
    router.get('/', function(req, res, next) {
        var messages = req.flash('error');
        Item.find({}, {'item_name':1, 'stock':1}, function(err, docs) {
            res.render('index', { title: 'Express', csrfToken: req.csrfToken(), messages: messages, loginErrors: messages.length > 0});
            io.on('connection', function (socket) {
                socket.emit('items', { item: docs });
            });
        });
    });

views/index.hbs
==================
<div class="list-group list-item-status" id="listItem">
     {{#each items }}
     <li class="list-group-item" id="listGroup">
         {{#each this }}
               {{ this.item_name }}
               <span class="badge">{{ this.stock }}</span>
         {{/each}}
     </li>
     {{/each}}
</div>

try to use DOM to become like above code
=========================================
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script>
    var socket = io();
        socket.on('items', function (data) {
            var docs = JSON.stringify(data, null, 4);

            $.each(JSON.parse(docs), function (index, val) {
                console.log(val);
                for (var i = 0; i < val.length; i++) {
                    $('#listItem').html($('<li class="list-group-item" id="listGroup">'));
                }
            });
        });
</script>