Edit respective element on list
<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>