Как добавить значения из json в одинаковые div?

В общем имеется код для добавления значений из json в div блоки

`$(document).ready(function(){
 $.ajax({
 url: 'ajax/prop',
 dataType: 'html',
 success:function(data){
 var jsonStr = JSON.parse(data);
 const container= document.getElementById('prop');
 jsonStr.forEach(function(item) {
 const itemDiv = document.createElement('button');
 itemDiv.classList.add('btn');
 itemDiv.id = item.id;
 let innerHtml = '<dl>';
 Object.keys(item).forEach(function(key) {
 innerHtml += `
  <dd>${item[key]}<dd>
;
});
innerHtml += '</dl>';
itemDiv.innerHTML = innerHtml;
container.appendChild(itemDiv);
});
}
});`

Но проблема в том что все значения добавляются только в первый div, а мне нужно что бы первое значение из json добавилось в первый div, второе во второй и т.д. Вот строка из json. {"id":"1","time":"2 минуты"},{"id":"2","button":"Купить"},{"id":"3","back":"Вернуть"},{"id":"4","time":"1 минута"}