title: How do I make multiple instances of scrollable text? It Works for one instance
body: <p>I am building a functionality in javascript by which if a class is applied to a span, it scrolls to the left.</p>
  
  <p><a href="http://codepen.io/rickieanand/pen/YWJWqR" rel="nofollow">Link to the scrolling text code on codepen</a></p>
  
  <pre><code>            &lt;htm&gt;
              &lt;head&gt;
              &lt;style type="text/css"&gt;
  
              *{margin: 0;padding: 0}
  
              pre {
                overflow: auto;
              }
  
              .frmText{
                  width: 300px;
                  height: 32px;
                  overflow: hidden;
              }
              .scrollable{
              white-space: pre;
  
              }
              &lt;/style&gt;
              &lt;script&gt; 
  
                  var tt=setTimeout("",100);
  
                  var scrollable, ele, text, newText, str, id;
                  function scrollText(){
                      text = ele.innerHTML;
                      newText = text.substr(0,1);
                      str= text.substr(1,text.length) + newText;
                      ele.innerHTML = str;
                      console.log("----"+ele.innerHTML)
                      tt=setTimeout("scrollText()",100);
                  }
  
                  window.onload = function() {
  
                      scrollable = document.querySelectorAll('.scrollable');
  
                      Array.prototype.forEach.call(scrollable, function(el, i){
                          ele= el;
                          id= i;
                          ele.innerHTML+='               '
                          try {
                              scrollText();                
                          }
                          catch(e){
  
                          }
                          console.log("**********************************************")
                      });
  
                  }
  
                  function stop(){
                      window.clearTimeout(tt);
                  }
              &lt;/script&gt;
              &lt;/head&gt;
  
              &lt;body&gt;
  
  
              &lt;div class=frmText&gt;
                  &lt;p class='scrollable' onmouseover="stop()" onmouseout="scrollText()"&gt;Batman vs Superman scrolling text scrollTexts here&lt;/p&gt;
                  &lt;p class='scrollable' onmouseover="stop()" onmouseout="scrollText()"&gt;Superman vs Batman scrolling text starts here&lt;/p&gt;
  
              &lt;/div&gt;
  
              &lt;/body&gt;
              &lt;/html&gt;
  </code></pre>
  
  <p>The problem is it doesn't work for multiple instances.
  I guess the only option left is to go for multithreading
  I want this code purely in javascript.</p>
  
  <p>Kindly help </p>