Limit a createelement

Question

How do I limit the amount (in 1) of DIV that is created through createElement for each button and make if the same button is clicked again add +1 in the field txt_result after the div is displayed.

function conteudo(btn){  
  //Cria a div  
  var div_c = document.createElement("DIV");  
  div_c.style.width = "30%";  
  div_c.style.height = "35px";  
  div_c.style.margin = "30px 10px";  
  div_c.style.background = "#ffe0e0";  
  div_c.innerHTML = "Item: <input name='txt_result'  type='text' value='' />";  
  document.getElementById("main").appendChild(div_c);  

  //Pega os conteúdos e exibe  
  var num = btn.previousElementSibling.value;  
  div_c.querySelector('[name="txt_result"]').value = num;  
}  

<input name="txt_1" id="txt_1" type="text" value="1" />  
<input name="btn1" id="btn1" type="button" value="Botao 1" onclick="conteudo(this)" />  

<input name="txt_2" id="txt_2" type="text" value="2" />  
<input name="btn2" id="btn2" type="button" value="Botao 2" onclick="conteudo(this)" />  

<input name="txt_3" id="txt_3" type="text" value="3" />  
<input name="btn3" id="btn3" type="button" value="Botao 3" onclick="conteudo(this)" />  

<div id="main"></div>

Answer 1

Find out if the widget already exists on the page with getById, and only if it does not exist, create a new element.

function conteudo(btn){
  var div_c = document.getElementById('item_div');

  //Cria a div
  if (!div_c) {
    div_c = document.createElement("DIV");
    div_c.id = "item_div";
    div_c.style.width = "30%";  
    div_c.style.height = "35px";  
    div_c.style.margin = "30px 10px";  
    div_c.style.background = "#ffe0e0";  
    div_c.innerHTML = "Item: <input name='txt_result'  type='text' value='0' />";  
    document.getElementById("main").appendChild(div_c);
  }

  //Pega os conteúdos e exibe  
  var num = btn.previousElementSibling.value;
  var input = div_c.querySelector('[name="txt_result"]');
  input.value = parseInt(input.value) + parseInt(num);
}

<input name="txt_1" id="txt_1" type="text" value="1" />  
<input name="btn1" id="btn1" type="button" value="Botao 1" onclick="conteudo(this)" />  

<input name="txt_2" id="txt_2" type="text" value="2" />  
<input name="btn2" id="btn2" type="button" value="Botao 2" onclick="conteudo(this)" />  

<input name="txt_3" id="txt_3" type="text" value="3" />  
<input name="btn3" id="btn3" type="button" value="Botao 3" onclick="conteudo(this)" />  

<div id="main"></div>

Answer 2

After a lot of trying I got what I wanted. In this case, I bring the data from bank and display in forms of buttons and inputs that is within php WHILE below. The code javascript manipulates the data contained within the inputs in which it was selected.

<script>    
function mostrar(btn) {    
    const div = btn.closest('div');    

    var tx_id = div.querySelector('[name="tx_id"]').value;   
    var div_R = document.getElementById(tx_id);
    if(!div_R){
    var div_c = document.createElement("DIV");
    div_c.id = tx_id;
    div_c.style.width = "95%";
    div_c.style.height = "35px";
    div_c.style.margin = "30px 10px";
    div_c.style.background = "#ffe0e0";
    div_c.innerHTML = "ID: <input name='v4' id='v4' type='text' size='2' value='' />   Produto: <input name='v1' id='v1' type='text' value='' />   Quantidade: <input name='v2' id='v2' type='text' value='' size='2' /> Preço: <input name='v3' id='v3' type='text' value='' size='10' /> Sub-total: <input name='v5' id='v5' type='text' value='' size='10' />";
  document.getElementById("main").appendChild(div_c); 

   var t1 = div.querySelector('[name="tx1"]').value;
   var t2 = div.querySelector('[name="tx2"]').value;
   var t3 = div.querySelector('[name="tx3"]').value;
   var t4 = div.querySelector('[name="tx_sub_t"]').value;

   div_c.querySelector('[name="v1"]').value = t1;
   div_c.querySelector('[name="v2"]').value = t2;
   div_c.querySelector('[name="v3"]').value = t3;
   div_c.querySelector('[name="v4"]').value = tx_id;
   div_c.querySelector('[name="v5"]').value = t4; 
    }else{

    //Atualiza o dado do INPUT quantidade dos botões
    var num_1 = div.querySelector('[name="tx2"]').value;
    var soma1 = parseInt(num_1) + 1;
    div.querySelector('[name="tx2"]').value = soma1;

    //Atualiza o dado do INPUT subtotal dos botões
    var tx_val_1 = div.querySelector('[name="tx3"]').value;
    var tx_val_2 = div.querySelector('[name="tx_sub_t"]').value;
    var soma2 = (parseInt(tx_val_1) + parseInt(tx_val_2)).toFixed(2);
    div.querySelector('[name="tx_sub_t"]').value = soma2;

    //Atualiza o dado dos INPUTS da DIV criada pela função
    div_R.querySelector('[name="v2"]').value = soma1;
    div_R.querySelector('[name="v5"]').value = soma2; 
    }   
}
</script>

<?php do { ?>  
  <div>  
    <input name="tx_id" type="text" value="<?php echo $row_Recordset1['id']; ?>" size="2" style="background:#F96" />  
    <input name="tx1" type="text" value="<?php echo $row_Recordset1['nome']; ?>" />  
    <input name="tx2" type="text" value="1" />  
    <input name="tx3" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />  
    <input name="tx_sub_t" type="text" value="<?php echo $row_Recordset1['preco']; ?>" />  
    <button name="btn" id="btn" type="button" onclick="mostrar(this)"><?php echo $row_Recordset1['nome']; ?></button>  
  </div>  
  <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>  


 <div id="main"></div>