title: I want to change certain names in my UL using a button
body: <p>I want to change 9 of the names in the UL to a red font using a on click button, while the other 3 names remain in a black font. And I want a button to reset the red fonts back to their original font. Can anyone help?</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-js lang-js prettyprint-override"><code>var title = document.getElementById("title");
  var buttons = document.getElementsByClassName("btn");
  var buttons = document.getElementsByClassName("btn2");
  
  for (var btnIndex = 0; btnIndex &lt; buttons.length; btnIndex++) {
    buttons[btnIndex].onclick = function() {
      title.style.color = this.getAttribute('data-color');
    }
  } else {
    title1.style.color = this.getAttribute('data-color');
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li id="title"&gt;John&lt;/li&gt;
    &lt;li id="title"&gt;Jack&lt;/li&gt;
    &lt;li id="title"&gt;Joe&lt;/li&gt;
    &lt;li id="title1"&gt;Jim&lt;/li&gt;
    &lt;li id="title"&gt;David&lt;/li&gt;
    &lt;li id="title"&gt;Sam&lt;/li&gt;
    &lt;li id="title1"&gt;Jay&lt;/li&gt;
    &lt;li id="title"&gt;Frank&lt;/li&gt;
    &lt;li id="title"&gt;Tim&lt;/li&gt;
    &lt;li id="title"&gt;Zack&lt;/li&gt;
    &lt;li id="title"&gt;Lewis&lt;/li&gt;
    &lt;li id="title1"&gt;Danny&lt;/li&gt;
  
    &lt;button class="btn" data-color="red"&gt;Change 9 names to red&lt;/button&gt;
    &lt;button class="btn2" data-color="black"&gt;Reset&lt;/button&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>