<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Multiple Counter</title>
  </head>
  <body>
    <div id='counter_app'></div>
    <script id='counter_template' type='text/ractive'>
      <h1>Multiple Counter</h1>
      <form on-submit="addItem(event)">
        <input type='text' placeholder='new title' value='{{new_title}}' />
        <input type="submit" value="Add">
      </form>
      <table>
        <tbody>
          {{#each items:i}}
          <tr>
            <td><button on-click='countUp(i)'>+</button></td>
            <td>{{title}}</td>
            <td>{{count}}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </script>
    <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
    <script src='js/counter.js'></script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Multiple Counter</title>
  </head>
  <body>
    <div id='counter_app'></div>
    <script id='counter_template' type='text/ractive'>
      <h1>Multiple Counter</h1>
      <form on-submit="addItem(event)">
        <input type='text' placeholder='new title' value='{{new_title}}' />
        <input type="submit" value="Add">
      </form>
      <table>
        <tbody>
          {{#each items:i}}
          <tr>
            <td><button on-click='countUp(i)'>+</button></td>
            <td>{{title}}</td>
            <td><input type="text" value="{{count}}"></td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </script>
    <script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>
    <script src='js/counter.js'></script>
  </body>
</html>

Enable modifying count by hand
Enable modifying count by hand
