title: I want to remove the <hr> tag from the last <li> tag
body: <p>What I am trying to make is to remove the last <em>hr</em> tag from my <em>li</em> tag. </p>
  
  <p><strong>JavaScript:</strong></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>$(document).ready(function() {
    var api = "https://wind-bow.gomix.me/twitch-api";
    var streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp",
      "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"
    ];
    var newStreamers = []
  
    for (var i = 0; i &lt;= streamers.length - 1; i++) {
      newStreamers.push('&lt;li&gt;' + streamers[i] + '&lt;/li&gt;' + '&lt;hr&gt;');
    }
    $("#streamers").html(newStreamers.join(""));
    $(".container &gt; .list &gt; ul &gt; li:not(:last-child)").css();
    $(".container &gt; .list &gt; ul &gt; li").css({
      'margin-left': '50px',
      'padding': '30px'
    });
    $("#streamers:last-child hr").css({
      'display': 'none'
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container"&gt;
    &lt;div class="twitch"&gt;
      Twitch
    &lt;/div&gt;
    &lt;div class="list"&gt;
      &lt;ul&gt;
        &lt;li id="streamers"&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;footer&gt;
    &lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Here I have the link for my CodePen:</strong></p>
  
  <pre><code>https://codepen.io/Terzio/pen/zjPBoq
  </code></pre>
  
  <p>Tell me everything is wrong in this code so I can learn from my mistakes and become better.</p>