title: How to scroll Right on a button click.?
body: <p>So I made a horizontal slider of some cards and i am able to make them scroll left on click of a button but how do I get a button, which on clicked scrolls right?</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="recCard-slider"&gt;
      &lt;p&gt;&lt;i class="fas fa-chevron-left" id="scrollRight"&gt;&lt;/i&gt; &lt;i class="fas fa-chevron-right" id="scrollLeft" &gt;&lt;/i&gt;&lt;/p&gt;
      &lt;div id="content"&gt;    
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
          &lt;p&gt;Hello&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <pre><code>const buttonleft = document.getElementById('scrollLeft');
  
  buttonleft.onclick = function(){
         document.getElementById('content').scrollLeft +=100;
  }
  </code></pre>
  
  <p>I have  <code>#content</code> with <code>overflow-x: scroll</code> and <code>white-space: nowrap;</code></p>
  
  <p>I want the Icon <code>"chevron-left"</code> for scrolling back (right).</p>