title: How to display information relative to image clicked using pokemon API?
body: <p>I'm trying to get and display the image and information of a clicked pokemon from pokemon API</p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;
  &lt;/script&gt;
  &lt;script src="pokedex2.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="pokedex2.css"&gt;
  &lt;title&gt;Pokedex v 2.0&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="all"&gt;
          &lt;div id="pokemon"&gt;
  
          &lt;/div&gt;
          &lt;div id="chosen"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>$(document).ready(function(){
       for(i = 1; i &lt;=151; i ++){  
          $("#pokemon").append("&lt;img id=pokepic" + i + " 
  src='http://pokeapi.co/media/img/" + i +
      ".png'&gt;");   
   }    
      var clicked = false;
      $("img").click(function(){
          clicked = true;
          console.log(this);
  
      if(clicked){
          $.get("http://pokeapi.co/api/v1/pokemon/" + i +"/", function(data){
              var str = "";
              str += "&lt;h4&gt;Types&lt;/h4&gt;";
              str += "&lt;ul&gt;";
              var str2 = "";
              str2 += "&lt;h4&gt;height&lt;/h4&gt;";
              str2 += "&lt;ul&gt;";
              var str3 = "";
              str3 += "&lt;h4&gt;weight&lt;/h4&gt;";
              str3 += "&lt;ul&gt;";      
              for(i = 0; i &lt; data.types.length; i ++){
                  str += "&lt;li&gt;" + data.types[i].name + "&lt;/li&gt;";           
              }
                  str2 += "&lt;li&gt;" + data.height + "&lt;/li&gt;";
                  str3 += "&lt;li&gt;" + data.weight + "&lt;/li&gt;";
                  str += "&lt;/ul&gt;"
                  str2 += "&lt;/ul&gt;"
                  str3 += "&lt;/ul&gt;"
                  $("#chosen").html(str + str2 + str3);    }, "json");
                  }
  
      else{
           clicked = false;
          }     
      })
  });
  </code></pre>
  
  <p>At the moment, the only information being brought up are for the first 3 pokemon in the list, not for the pokemon that was clicked. I need to find the information associated with the clicked pokemon, like a pokedex.</p>
  
  <p>I included console.log to show that whichever image is clicked, the picture, and pokepic ID number associated with that image appear in the console. Instead what I need is for the image and stats associated with each image to appear in the div labeled chosen</p>