Шаблон, события, изменение значения
 

Есть шаблон, например:

<div id="template">
     <div id="myVal">0<div>
     <input id="btn" type="button">
</div>

Этот шаблон будет добавляться на страницу
десяток раз.
При нажатии на кнопку #btn конкретного экземпляра шаблона
значение div#myVal этого экземпляра шаблона будет меняться
скажем на 1.
(Я понимаю, что id уникален в пределах страници и
наверное вместо id нужно юзать class)
Как это грамотно реализовать?

в чем проблема сделать класс?

У вас в верстке ошибка.

<button type="button" class="add-new-template">Add new template</button>
<div class="template">
  <div class="value">0</div>
  <input class="button increase-value" type="button" value="Click me">
</div>

<script>
var template = document.querySelector('.template').cloneNode(true);

document.body.addEventListener('click', function (e) {
    if (!!e.target && e.target.classList.contains('increase-value')) {
        e.target.parentNode.querySelector('.value').textContent++;
    }
});

document.querySelector('.add-new-template').addEventListener('click', function () {
    document.body.appendChild(
        template.cloneNode(true)
    );
});
</script>