title: build onclick inside a loop Javascript/jquery
body: <p>What I am trying to do:</p>
  
  <p>dynamically build a onclick event attached to an img tag and pass 3 values. The problem is that the onclick is within a loop so the value of the passed values change depending on their position within the loop.</p>
  
  <p>I have managed to get one value passed by attaching it to the img id, but im at a loss as to how to pass the other two</p>
  
  <pre><code>newElement.innerHTML = '&lt;img id="'+ id + '" class="Videoimg" onclick="myFunction(this.id,\"" + VideoTitlePlayer + "\","' + VideodescPlayer + '")" src="' + thumbnail +'"&gt;&lt;div id="VideoNames" class="VideoTitle"&gt;'+ title +'&lt;br&gt;&lt;div class="VideoDescription"&gt;' + desc + '&lt;/div&gt;&lt;/div&gt;';
  </code></pre>
  
  <p>OK so this is the issue<br>
  This function is called to build a menu of youtube videos</p>
  
  <pre><code>$.each(playlistVideoItems, function (index, item) 
              {
              displayVideoResult(item.snippet, item.snippet.resourceId.videoId);
              });
  </code></pre>
  
  <hr>
  
  <pre><code>function displayVideoResult(videoSnippet, VideoPlay) 
  { var title = videoSnippet.title;
  var desc = videoSnippet.description;
  var thumbnail = videoSnippet.thumbnails.default.url;
  var id = VideoPlay;
  
  var newElement = document.createElement("div");
  newElement.setAttribute("class", "VideoContainerCSS");
      // Set the value to what you want
    newElement.innerHTML = '&lt;img id="'+ id + '" class="Videoimg" onclick="myFunction(this.id)" src="' + thumbnail +'"&gt;&lt;div id="VideoNames" class="VideoTitle"&gt;'+ title +'&lt;br&gt;&lt;div class="VideoDescription"&gt;' + desc + '&lt;/div&gt;&lt;/div&gt;';
  
  document.getElementById("results").appendChild(newElement);
  }
  </code></pre>
  
  <p>I need some way to build into the link the videoID, video Title and Video desc so when the img link is clicked it passes all 3 to a function that runs the youtube api</p>