Hey buddy, I hope this helps I tested it out and works the way you requested... Try it out =)
<!DOCTYPE html>
<html>
<body>
<div id="output" style='padding:30px'>
<h1 id='h1'>Hello This is my text</h1>
</div>
<button id='btn' data-id=''>Add text</button>
<script>
var people = [
{id:1, name: 'Tom', job: 'Software developer', age: 33},
{id:2, name: 'Jane', job: 'Software developer', age: 36},
{id:3, name: 'Dick', job: 'Software developer', age: 38},
{id:4, name: 'Jenny', job: 'Software developer', age: 41},
{id:5, name: 'Harry', job: 'Software developer', age: 36},
{id:6, name: 'Joe', job: 'Software developer', age: 46}
];
let objs = 0
let btn = document.getElementById('btn')
btn.addEventListener('click', () => addText())
function addText() {
let output = document.getElementById('output')
let max = objs + 2
for (let i = objs; i < people.length && i < max; i++) {
let p = document.createElement('p')
p.innerHTML = people[i].name + '' + people[i].job + '' + people[i].age
output.appendChild(p)
objs++
}
if (objs >= people.length - 1) {
btn.innerHTML = 'no more items left'
}
}
</script>
</body>
</html>