title: How to Select Specific Piece of HTML using JQuery?
body: <p>my goal for this code is to make it so when one of the tree branches is clicked, it changes the clicked <code>^</code> from a <code>^</code> to a <code>O</code> using JQuery and Javascript (this is for a school assignment). For example, if I clicked the very top <code>^</code> it would replace the <code>^</code> with an <code>O</code>, or if I clicked the very left <code>^</code> in the second row, it would change that <code>^</code> to a <code>O</code>, etc. I want to try and keep it rather simple and only add on to the existing code I already have rather than replacing all of it. I am a beginner when it comes to coding in Javascript and JQuery, so please avoid super-advanced tactics. Thank you very much.</p>
  
  <p>Current Code:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>```
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Insert title here&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;Welcome to the Holiday Tree Simulator&lt;/h1&gt;
    &lt;ul&gt;
     &lt;li&gt; Click a green branch (&lt;font color=green&gt;^&lt;/font&gt;) to change it into a red ornament
     &lt;li&gt; Click a red ornament (&lt;font color=red&gt;O&lt;/font&gt;) to turn it into an unlit light (only when power is off)
     &lt;li&gt; Click an unlit light (&lt;font color=gray&gt;*&lt;/font&gt;) to turn it into a green branch (only when power is off)
    &lt;/ul&gt;
  &lt;hr&gt;
   &lt;div id=treeArea align=center style="font-family: Courier"&gt;
    &lt;font id=treeBranches style="font-family: Courier" color="green"&gt;&lt;/font&gt;
    &lt;font id=treeTrunk style="font-family: Courier" color="brown"&gt;&lt;/font&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;hr&gt;
  Tree Size:&lt;input type=text id=treeSize&gt;&lt;/input&gt;
  Trunk Size:&lt;input type=text id=trunkSize&gt;&lt;/input&gt;
  &lt;button id=new&gt;New Tree&lt;/button&gt;&lt;br&gt;
  Power: &lt;span id=powerVal&gt;OFF&lt;/span&gt;
  &lt;button id=power&gt;Toggle Power&lt;/button&gt;
     &lt;/body&gt;
     &lt;script src=http://code.jquery.com/jquery.min.js type=text/javascript&gt;&lt;/script&gt;
     &lt;script type=text/javascript&gt;
  var treeSize = 8;
  var trunkSize = 3;
  for (var row=1 ; row&lt;=treeSize ; row++){
   for (var col=1 ; col&lt;=row ; col++)
    $("#treeBranches").append("^");
   $("#treeBranches").append("&lt;br&gt;");
  }
  for (var trunkrow=1 ; trunkrow&lt;=trunkSize ; trunkrow++){
   for (var trunkcol=1 ; trunkcol&lt;=2 ; trunkcol++)
    $("#treeTrunk").append("|");
   $("#treeTrunk").append("&lt;br&gt;");
  }
  //////////new tree//////////
  $("#new").click(function newTree(){
   $("#treeBranches").html("")
   $("#treeTrunk").html("")
   treeSize = document.getElementById("treeSize").value;
   trunkSize = document.getElementById("trunkSize").value;
   for (var row=1 ; row&lt;=treeSize ; row++){
    for (var col=1 ; col&lt;=row ; col++)
     $("#treeBranches").append("^");
    $("#treeBranches").append("&lt;br&gt;");
   }
   for (var trunkrow=1 ; trunkrow&lt;=trunkSize ; trunkrow++){
    for (var trunkcol=1 ; trunkcol&lt;=2 ; trunkcol++)
     $("#treeTrunk").append("|");
    $("#treeTrunk").append("&lt;br&gt;");
   }
  })
  ///////////change ornament/////////////
  $("#treeBranches").click(function changeOrnament(){
   
  })
  ///////////run newTree command////////////////
  ///////////run newTree command////////////////
  &lt;/script&gt;
  &lt;/html&gt;
  ```</code></pre>
  </div>
  </div>
  </p>
  
  <p>Update: Here is the finished code to my project, thank you for your advice, I know this was a school project, but I didn't need the work done for me, I just needed to be pushed in the right direction, and you guys did that, so thank you.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h1&gt;Welcome to the Holiday Tree Simulator&lt;/h1&gt;
  &lt;ul&gt;
    &lt;li&gt; Click a green branch (&lt;font color=green&gt;^&lt;/font&gt;) to change it into a red ornament
    &lt;li&gt; Click a red ornament (&lt;font color=red&gt;O&lt;/font&gt;) to turn it into an unlit light (only when power is off)
    &lt;li&gt; Click an unlit light (&lt;font color=gray&gt;*&lt;/font&gt;) to turn it into a green branch (only when power is off)
  &lt;/ul&gt;
  
  &lt;hr&gt;
  
  &lt;div id=treeArea align=center style="font-family: Courier"&gt;
  &lt;font id=treeBranches style="font-family: Courier" color="green"&gt;&lt;/font&gt;
  &lt;font id=treeTrunk style="font-family: Courier" color="brown"&gt;&lt;/font&gt;
  &lt;/div&gt;
  
  &lt;hr&gt;
  
  Tree Size:&lt;input type=text id=treeSize&gt;&lt;/input&gt;
  Trunk Size:&lt;input type=text id=trunkSize&gt;&lt;/input&gt;
  &lt;button id=new&gt;New Tree&lt;/button&gt;&lt;br&gt;
  Power: &lt;span id=powerVal&gt;OFF&lt;/span&gt;
  &lt;button id=power&gt;Toggle Power&lt;/button&gt;
  &lt;/body&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=text/javascript&gt;&lt;/script&gt;
  
  &lt;script type=text/javascript&gt;
  var treeSize = 8;
  var trunkSize = 3;
  for (var row=1 ; row&lt;=treeSize ; row++)
  {
   for (var col=1 ; col&lt;=row ; col++)
    {
    $("#treeBranches").append("&lt;font class='branches'&gt;^&lt;/font&gt;");
    }
   $("#treeBranches").append("&lt;br&gt;");
  }
  for (var trunkrow=1 ; trunkrow&lt;=trunkSize ; trunkrow++)
  {
   for (var trunkcol=1 ; trunkcol&lt;=2 ; trunkcol++)
    $("#treeTrunk").append("|");
   $("#treeTrunk").append("&lt;br&gt;");
  }
  ///////////change ornament/////////////
  $(".branches").click(changeOrnament);
  function changeOrnament()
  {
   if ($(this).html()=="^")
    {
    $(this).attr("color","red");
    $(this).html("O");
    $(this).attr("class","not_ast")
    }
   else if ($(this).html()=="O" &amp;&amp; power==0)
    {
    $(this).attr("color","gray");
    $(this).html("*");
    $(this).attr("class","ast")
    }
   else if ($(this).html()=="*" &amp;&amp; power==0)
    {
    $(this).attr("color","green");
    $(this).html("^");
    $(this).attr("class","not_ast");
    }
  }
  //////////new tree//////////
  $("#new").click(newTree);
  function newTree()
  {
   $("#treeBranches").html("")
   $("#treeTrunk").html("")
   treeSize = document.getElementById("treeSize").value;
   trunkSize = document.getElementById("trunkSize").value;
   for (var row=1 ; row&lt;=treeSize ; row++)
   {
    for (var col=1 ; col&lt;=row ; col++)
     {
     $("#treeBranches").append("&lt;font class='new_branches'&gt;^&lt;/font&gt;");
     }
    $("#treeBranches").append("&lt;br&gt;");
   }
   for (var trunkrow=1 ; trunkrow&lt;=trunkSize ; trunkrow++)
   {
    for (var trunkcol=1 ; trunkcol&lt;=2 ; trunkcol++)
     $("#treeTrunk").append("|");
    $("#treeTrunk").append("&lt;br&gt;");
   }
   $(".new_branches").click(changeOrnament);
  }
  var power=0;
  $("#power").click(powerToggle);
  function powerToggle()
  {
   if (power==0)
    {
    $("#powerVal").html("ON");
    power=1;
    $(".ast").attr("color","yellow");
    } 
   else
    {
    $("#powerVal").html("OFF");
    power=0;
    $(".ast").attr("color","gray");
    }
    
  }
  ///////////run newTree command////////////////
  ///////////run newTree command////////////////
  
  
  &lt;/script&gt;
  
  
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>