title: Multiple Slideshows not working (javascript)
body: <p><strong>Introduction</strong></p>
  
  <p>I have 2 simple slideshows on a single page. Only one works. Please help.</p>
  
  <p>I did research on how to develop a simple sideshow and it worked at first</p>
  
  <p>But then i added another slideshow and it went out of wacko</p>
  
  <p><br></p>
  
  <p><strong>My Code</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>//slideshow-pokeballs.js
  
  var images = ["https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Great-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Ultra-Ball.png", "https://img.rankedboost.com/wp-content/uploads/2016/07/Master-Ball.png"];
  
  var imageNumber = 0;
  var imageLength = images.length - 1;
  
  function changeBall(x) {
   
   imageNumber += x;
   
   document.getElementById("pokeballs").src = images[imageNumber];
   
   return false;
   
  }
  
  //slideshow-pokemon.js
  
  var imageNumber = 0;
  var imageLength = images.length - 1;
  
  var images = ["https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757", "https://vignette.wikia.nocookie.net/pokemon/images/7/73/004Charmander.png/revision/latest/scale-to-width-down/200?cb=20140724195345", "https://vignette.wikia.nocookie.net/pokemon/images/3/39/007Squirtle.png/revision/latest/scale-to-width-down/200?cb=20140328191525"];
  
  function changeMon(x) {
   
   imageNumber += x;
   
   document.getElementById("pokemon").src = images[imageNumber];
   
   return false;
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"&gt;&lt;/script&gt;
   
  &lt;body&gt;
   
   &lt;div&gt;
    
    &lt;img src="https://img.rankedboost.com/wp-content/uploads/2016/07/PokeBall.png" id="pokeballs" /&gt;
    &lt;br&gt;
  
    &lt;a href="#" onclick="changeBall(-1); return false;"&gt;Previous Slide&lt;/a&gt;
    &lt;a href="#" onclick="changeBall(1); return false;"&gt;Next Slide&lt;/a&gt;
  
    &lt;script src="js/slideshow-pokeballs.js"&gt;&lt;/script&gt;
   
   &lt;/div&gt;
   
   &lt;br&gt;
   
   &lt;div&gt;
    
    
    &lt;img src="https://vignette.wikia.nocookie.net/pokemon/images/2/21/001Bulbasaur.png/revision/latest/scale-to-width-down/200?cb=20140328190757" id="pokemon" /&gt;
    &lt;br&gt;
   
    &lt;a href="#" onclick="changeMon(-1); return false;"&gt;Previous Slide&lt;/a&gt;
    &lt;a href="#" onclick="changeMon(1); return false;"&gt;Next Slide&lt;/a&gt;
   
    &lt;script src="js/slideshow-pokemon.js"&gt;&lt;/script&gt;
   
   
   &lt;/div&gt;
   
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><br></p>
  
  <p><strong>What i would like</strong></p>
  
  <p>1)I would like to know how to make both slideshows work on the same page and possibly add more slideshows to the page.</p>
  
  <p>2)I hope that the solution i have is a simple change, i don't want to go off-course with the original idea that i had here.</p>