title: How can I target an id inside an specific class?
body: <p>I am constructing a Hanoi Tower, but I'm coming across problems involving parenting elements. I am trying to move the disks using remove a child and append child. Every tower and disk has an ID, but when I try to target a tower ID I get a disk ID.</p>
  <pre><code>&lt;body&gt;
      &lt;article class=&quot;container&quot;&gt;&lt;/article&gt;
      &lt;section class=&quot;towers&quot;&gt;
          &lt;div class=&quot;tower&quot; id=&quot;towerOne&quot;&gt;
              &lt;div class=&quot;disk&quot; id=&quot;diskOne&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;disk&quot; id=&quot;diskTwo&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;disk&quot; id=&quot;diskThree&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;disk&quot; id=&quot;diskFour&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tower&quot; id=&quot;torreTwo&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tower&quot; id=&quot;torreThree&quot;&gt;&lt;/div&gt;
      &lt;/section&gt;
      &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  
  const container = document.querySelector(&quot;.container&quot;)
  const towers = document.querySelectorAll(&quot;.tower&quot;)
  const disks = document.querySelectorAll(&quot;.disk&quot;)
  
  let chosenDisc = &quot;&quot;
  let chosenTower = &quot;&quot;
  
  towers.forEach(choice =&gt; choice.addEventListener(&quot;click&quot;, (e) =&gt; {
      chosenTower = e.target.id
  }))
  
  disks.forEach(choices =&gt; choices.addEventListener(&quot;click&quot;, (e) =&gt; {
      chosenDisc = e.target
      chosenTower.removeChild(chosenDisc) 
      container.appendChild(chosenDisc)
  }))
  </code></pre>
  <p>I did not put all IDs selections there, just classes to not long too much, but they are just the name plus numbers.</p>