title: HTML making Div editable by clicking on the edit button
body: <p>I am trying to make both DIV's editable when I click on the edit icon on bottom left. How can I do that?</p>
  
  <pre><code>&lt;li class="question" id="question2"&gt;
  
      &lt;div class="question-header curves dense-shadows"&gt;
  
          What color is the sky? 
      &lt;/div&gt;
      &lt;div class="question-content dense-shadows"&gt;
          &lt;ol type="A"&gt;
              &lt;li&gt;&lt;input type="radio" id="q2a1" name="question2" /&gt; Red&lt;/li&gt;
              &lt;li&gt;&lt;input type="radio" id="q2a2" name="question2" /&gt; Green&lt;/li&gt;
              &lt;li&gt;&lt;input type="radio" id="q2a3" name="question2" /&gt; Blue&lt;/li&gt;
              &lt;li&gt;&lt;input type="radio" id="q2a4" name="question2" /&gt; Brown&lt;/li&gt;
          &lt;/ol&gt;
          &lt;div style="text-align:right"&gt;
              &lt;a href="#"&gt;&lt;span style="margin-left:5px;"&gt;&lt;img src="images/editbutton.png" 
                  onmouseover="this.src='images/editbuttonhover.png'" onmouseout="this.src='images/editbutton.png'" title="Edit" alt="edit" /&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;a href="#"&gt;&lt;span style="margin-left:5px;"&gt;&lt;img src="images/deletebutton.png" 
                  onmouseover="this.src='images/deletebuttonhover.png'" onmouseout="this.src='images/deletebutton.png'" title="Delete" alt="delete"/&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>