title: fadeOut an image (has an id) on click of the image (so the ID is unknown until the click)
body: <p>Let's say I have 10 images on a page, and I want to hide an image when clicking on it.</p>
  
  <p>Each image has an id like: figure1, figure2, figure3, figure i++.</p>
  
  <p>Of course I could write this </p>
  
  <pre><code>$('#figure1').on('click', function() {
      $(this).hide();
  });
  
  $('#figure2').on('click', function() {
      $(this).hide();
  });
  
  $('#figure3').on('click', function() {
      $(this).hide();
  });
  </code></pre>
  
  <p>and so on but obviously that's not good.</p>
  
  <p>The other thing I thought was creating a function and triggering it with onclick="theFunction(id)", so then I could hide the right image within the function as it knows the id of the image, but when the page loads, obviously JS doesn't know which ID I'm going to delete. How could I make this dynamic?</p>
  
  <p>Any suggestions?</p>
  
  <p>Err I was using class instead of ID in my function :/ </p>
  
  <pre><code>function deletePhoto(photo_id, photoPosition) {
     $('#photoFigure' + photoPosition).fadeOut(2000);
  }
  </code></pre>
  
  <p>Called like:</p>
  
  <pre><code>&lt;div class="deletePhoto" onclick="deletePhoto({$value['id']}, {$i})"&gt;delete&lt;/div&gt;  
  </code></pre>