node.js+plates scrambled output

I'm using node.js and flatiron plates for templating, and having trouble with scrambled output when using an array for data.

I would like to bind an array to list items with the ID "list"

JS:

var express = require('express');
var app = express.createServer();
var fs = require('fs');
var plates = require('plates');

var html = fs.readFileSync('plates.html', 'utf-8');

app.get('/', function(req, res) {
    var data = {
        list: [
            "Alpha",
            "Bravo",
            "Charlie",
            "Delta",
        ]
    }
    res.send(plates.bind(html, data))
})

app.listen(8080)

HTML:

<html>
<body>
  <ul>
    <li id="list">REPLACE</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Click the following button.</p>
    <span>Go Back</span>
  </div>
</body>
</html>

I would expect the output to look like this, where only the list items are repeated:

<body>
  <ul>
    <li id="list">Alpha</li>
    <li id="list">Bravo</li>
    <li id="list">Charlie</li>
    <li id="list">Delta</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Click the following button.</p>
    <span>Go Back</span>
  </div>
</body>
</html>

However, I get this weird output and can't understand what the cause might be:

<html>
<body>
  <ul>
    <li id="list">Alpha</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic<li id="list">Bravo</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic<li id="list">Charlie</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic<li id="list">Delta</li>
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Clic
  </ul>
  <div>
    <h3>Hello World</h3>
    <p>Click the following button.</p>
    <span>Go Back</span>
  </div>
</body>
</html>

Any ideas?

(P.S. I know HTML doesn't allow for repeated IDs, it's just an example and not the issue)

Updated Information

I ran the tests that pksankara pointed out successfully, but if I modify the tests to use my markup, I get failures:

Modified test-16.html:

<ul>
<li class="components"></li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>

Output:

<ul>
<li class="components">Union</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Director</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Broadway</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Plates</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Resourceful</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>

The following is an example on how to do this from the plates repository

I expect that you can imitate it.

(EDIT: The only bug is https://github.com/flatiron/plates/issues/47)