title: creating html with perl
body: <pre><code>&lt;header&gt;
  &lt;script type="text/javascript"&gt;
  function hideit()
  {
  
  var x1 = document.getElementsByTagName("ol").item(0);
  var x = document.getElementsByTagName("ol");
  for (var i = 0; i &lt; x.length; i++)
    x[i].style.display="none";
  }
  function showit()
  {
  var x1 = document.getElementsByTagName("ol").item(0);
  
  var x=document.getElementsByTagName("ol");
  for (var i = 0; i &lt; x.length; i++)
   x[i].style.display="";
  }
  &lt;/script&gt;&lt;header&gt;
  &lt;body&gt;
  foreach $key (keys %{$stats_data{$out}})  {
  
      print $indexfd ("&lt;input onclick=\"showit()\" type=\"button\" id=\"&lt;?perl echo     $key; ?&gt;\" value=\"showit\"&gt;&lt;br&gt;&lt;input onclick=\"hideit()\" type=\"button\" id=\"&lt;?perl   echo $key; ?&gt;\" value=\"hideit\"&gt;&lt;br&gt;&lt;b&gt;&lt;ol id=$key&gt;$stats_data{$out}{$key}&lt;ol id=$key&gt;  &lt;/b&gt;&lt;br&gt;");
          }&lt;/body&gt;
  </code></pre>
  
  <p>I am creating an html document with perl. I wrote an event mouseover and mouseout to happen for every perl variable  (over a loop). But looks like the event controls all the variables at the same time. How do I write the event only once but enable it to individually be applied for each item: this is what I have currently</p>
  
  <p>but this html when displayed, does not let me control the event separately for each <code>$key</code>.</p>
  
  <p>Even though the buttons do get created for each $key, clicking on one, controls the <code>$stats_data{$out}{$key}</code> of all.</p>
  
  <p>I even tried passing the id to the show/hide script, but no luck.</p>