Olá, pessoal. Tudo bom? Comecei a pouco tempo estudar Javascript e, para treinar, bolei um exercício simples: Uma tela, aonde existe o botão "Adicionar Produto" que adiciona uma linha na tabela abaixo. É mais ou menos como num carrinho de compras de e-commerce. A minha dúvida está no seguinte: Quando adiciono uma linha, eu queria que o botão "+" adicionasse uma unidade na quantidade e o "-" tirasse. O problema é que para o primeiro item, até consegui programar, mas para os que serão gerados depois do "Adicionar Produto" não consegui de jeito nenhum. Eu dei uma limpada no código, porque por causa dos vários testes que tinha feito, ficou uma bagunça. Aí, eu realmente queria essa ajuda. Como posso fazer para que os botões de adicionar e remover itens sejam criados já programados para mexer na quantidade de sua respectiva linha? <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> // Write JavaScript here window.onload = function() { tableEl = document.getElementById('tabelaDados'); btnAddLine = document.getElementById('btnAddLine'); btnAddLine.addEventListener('click', function(){ var tr = document.createElement('tr'); tr.innerHTML = ` <td><button>-</button> 1 <button>+</button> </td> <td>carro</td> <td>R$ 55.000,00</td> <td>R$ 55.000,00</td> ` tableEl.appendChild(tr); }); } <!-- language: lang-css --> #tabelaHeader { height: 50px; width: 600px; } #tabelaDados { position: relative; height: 50; width: 600px; left: 60px; } <!-- language: lang-html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Usuários - Teste </title> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <link rel="stylesheet" type="text/css" href="../css/estilo.css"> </head> <body> <div class="menu"> <button id="btnAddLine">Adicionar Produto</button> </div> <table id="tabelaHeader"> <thead> <tr> <th>Quantidade</th> <th>Descrição</th> <th>Valor Unitário</th> <th>Valor Final</th> </tr> </thead> </table> <table id="tabelaDados"> <thead> <tr> <td><button>-</button>1 <button>+</button> </td> <td>carro</td> <td>R$ 55.000,00</td> <td>R$ 55.000,00</td> </tr> </thead> </table> <!-- end snippet --> Se puderem dar uma olhada para me ajudar, agradeço!