title: Edit respective element on list
body: <p>I'm making 2 lists. List of boys and girls. The button creates new element for each. Soo I want when i click for example boy1 element. Edit girl1 element. And change the color to black. When i click boy 2 edit girl2 and so on.
  This is my Html</p>
  
  <pre><code>&lt;div class="mainDiv"&gt;
  &lt;input type="button" value="Add new" id="clickme"onclick="addElements()"&gt;
    &lt;ul id="boys"&gt;
        &lt;li id="boy1"&gt;Boy1&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;ul id="girls"&gt;
        &lt;li id="girl1"&gt;Girl 1&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css</p>
  
  <pre><code>#boys {
    color:red;
  }
  #girls {
    color:blue;
  }
  li {
    cursor:pointer;
  }
  </code></pre>
  
  <p>And JavaScript</p>
  
  <pre><code> var i = 1;
      $("#clickme").click(function() {
        i++
          $("#boys").append("&lt;li id='boy" + i+"'&gt;Boy"+ i +"&lt;/li&gt;");
              $("#girls").append("&lt;li id='girl" + i+"'&gt;Girl"+ i +"&lt;/li&gt;")
    });
  </code></pre>
  
  <p>The example of result should look like this</p>
  
  <p><a href="https://i.stack.imgur.com/BlQ6R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BlQ6R.png" alt="enter image description here"></a></p>