title: How to include a loop in a jquery function
body: <p>I am using jquery <a href="http://www.outsharked.com/imagemapster/" rel="nofollow noreferrer">imagemapster</a> to generate an image map with highlighted areas and tooltips on hover.</p>
  
  <p>I have a 100 different areas and tooltips in my image (all with elements numbered 1-100) and all works well. </p>
  
  <p>However, I want to write a function that will allow me to loop through each of these elements so I don't have to write the key and tooltip code 100 times. What is the best way for me to do this?</p>
  
  <p>I have tried <code>each()</code> and <code>for (i = 0; i &lt; 100; i++) {  //code here }</code> but I think the looped output is causing errors.</p>
  
  <p>Current code that needs the loop in the Areas section below. 3 lines shown as example of the 100.</p>
  
  <p>Many Thanks</p>
  
  <pre><code>$(document).ready(function () {
  
    $('img').mapster({
    showToolTip: true,
    toolTipContainer: '&lt;div class="map_popup"&gt;&lt;/div&gt;',
    singleSelect : true,
    clickNavigate : true,
    mapKey: 'data-key',
    fill : true, 
  
  
    areas: [ 
  
      // below line needs to be looped. 3 examples shown
  
      { key: "1", toolTip: "&lt;h3&gt;Controller 1&lt;/h3&gt;:&lt;?php echo $Selected_1; ?&gt;" },
      { key: "2", toolTip: "&lt;h3&gt;Controller 2&lt;/h3&gt;:&lt;?php echo $Selected_2; ?&gt;" },
      { key: "3", toolTip: "&lt;h3&gt;Controller 3&lt;/h3&gt;:&lt;?php echo $Selected_3; ?&gt;" },
      // ...
    ]
  
  });
  </code></pre>