title: Javascript - using foreach and change image on mouseover
body: <p>im working on a project in mvc and have a javascript to change the image on mouseover.</p>
  
  <p>my problem is the follows:</p>
  
  <p>the script is working but only change the image for the first li element and then when i do mouseout
  it´s showing me the image of the last li element on the place of the first li.</p>
  
  <p>i can´t understand what happening .</p>
  
  <p>someone can give me a hand with this pls??</p>
  
  <p><strong>here is my code:</strong></p>
  
  <pre><code> &lt;ul&gt;
          @foreach (var p in ViewBag.MyIcon)
            {                               
                &lt;li&gt;
  
                    &lt;script  type='text/javascript'&gt;
                        function onHover() {
                            $("#iconInteraction").attr('src', '/Content/iconhover.png');
                        }
  
                        function offHover() {
                            $("#iconInteraction").attr('src', '@p.Icon');
                                }
                      &lt;/script&gt;   
  
                    &lt;form action="" method="post"&gt;
  
                         &lt;button type="submit" name="submit" id="Interface_Button"&gt;
                 &lt;img src="@p.Icon" onmouseover="onHover();" onmouseout="offHover();" id="iconInteraction"/&gt;
                 &lt;/button&gt;                     
                    &lt;/form&gt;
                &lt;/li&gt;
            } 
      &lt;/ul&gt;
  </code></pre>