Można to zrobić na wiele różnych sposobów, tutaj przykład na szybko:
<div id="words">
<button>text1</button>
<button>text2</button>
<button>text3</button>
<button>text4</button>
<button>text5</button>
<button>text6</button>
<button>text7</button>
<button>text8</button>
<button>text9</button>
</div>
<p id="output"></p>
const words = {}
const renderWords = (words) => {
return Object
.keys(words)
.reduce((items, word) => {
const item = words[word] === 1
? word
: `${word} x ${words[word]}`
return [...items, item]
}, [])
.join(', ')
}
const output = document.getElementById('output')
document
.getElementById('words')
.addEventListener('click', ({ target }) => {
if (words[target.textContent]) {
words[target.textContent] += 1
} else {
words[target.textContent] = 1
}
output.textContent = renderWords(words)
})
CodePen: https://codepen.io/caderek/pen/YLWjpx?editors=1010