Fill input by clicking button and multiply values

Question

Hello, good afternoon, I have a question in the following, I want to create a system that by clicking on a button, generates the value in an input, this I have already done, but I need that, when clicking more times on that button, the value of the input change to "Example (1.2..3)", with the multiplication value between (). An example of what it would look like:

In short, if I double-clicked Add, I would return this, and if I once clicked Remove, it would be changed to "Example Product (1)". Thank you very much to anyone who can help!

Answer 1

Creates variables for the elements of inputand the input type button, puts a addEventListener() for when you click the add button it makes a function q adds +1 for variable produto and if you click the remove button it makes a function removes -1 from variable produto. I also put so that if the variable produto if it is less than 0 always be 0 and never negative, and when it is 0 nothing appears in the input type text. And when it is greater than 0 appear "Product Example()" and the variable produto within parentheses in input text.

var adicionar = document.getElementById('Adicionar')
var remover = document.getElementById('Remover')
var input = document.getElementById('Exemplo')

var produto = 0

adicionar.addEventListener('click', function(){
    produto++
    
    if (produto > 0) {
   input.value = `Produto Exemplo (${produto})`
   
} else if (produto <= 0) {
    produto = 0
    input.value = ""
}
})

remover.addEventListener('click', function(){
    produto--
    
    if (produto > 0) {
   input.value = `Produto Exemplo (${produto})`
   
} else if (produto <= 0) {
    produto = 0
    input.value = ""
}
})

<hr>
<h2>Produto Exemplo </h2>
<input id="Adicionar" type="button" value="Adicionar">
<input id="Remover" type="button" value="Remover">
<br>
<input id="Exemplo" type="text" readonly value="">

I hope I’ve helped