title: Select the current div element on hover using class in Javascript
body: <p>I am making a Wordpress blog and editing a plugin's PHP files. The plugin displays all post using a <strong>while</strong> loop. On hover the original the current div of <code>class=&quot;myClass2</code>&quot; &amp; <code>id=&quot;div2&quot;</code> should be replaced with corresponding div of <code>class=&quot;myClass1&quot;</code> &amp; <code>id=&quot;div1&quot;</code> using a Javascript function but whichever post I hover on only the first post is replaced my its corresponding div if id is used and <code>ClassName</code> is not working.</p>
  <pre><code>    while ( $the_query-&gt;have_posts() ) { 
                              $the_query-&gt;the_post(); ?&gt;
                              &lt;article class=&quot;post type-post format-standard&quot;&gt;                            
                                  
                                  &lt;div  style=&quot;display:none;width:270px;height:370px;background-color:red&quot; class=&quot;myClass1&quot; onmouseout=&quot;myfunction2()&quot; id=&quot;div1&quot;&gt;
                                      &lt;?php the_excerpt(); ?&gt;
                                  &lt;/div&gt;                                  
                                  
                                  &lt;div class=&quot;myClass2&quot; id= &quot;div2&quot; onmouseover=&quot;myfunction1()&quot;&gt;
                                      &lt;a href=&quot;&lt;?php the_permalink(); ?&gt;&quot; title=&quot;&lt;?php the_title(); ?&gt;&quot;&gt;
                                                                                          &lt;img width=&quot;60&quot; height=&quot;60&quot; class=&quot;attachment-popular-post-featured-image wp-post-image&quot; src=&quot;&lt;?php echo $no_preview_img; ?&gt;&quot; /&gt;
                                          &lt;?php } else {
                                              $check_size = wp_get_attachment_image_src( get_post_thumbnail_id( $post-&gt;ID ), 'popular-post-featured-image' );
                                              
                                          } ?&gt;
                                      &lt;/a&gt;
                                      
                                      
                                      &lt;div id=&quot;mydiv3&quot; &gt;  &lt;?php the_excerpt(); ?&gt;&lt;/div&gt;
                                  &lt;/div&gt;&lt;!-- .entry-content --&gt;
                              &lt;/article&gt;&lt;!-- .post --&gt;  
  
  
  &lt;script&gt;
  function myFunction1(){
  document.getElementsByClassName(&quot;myClass1&quot;).style.display=&quot;block&quot;;
  document.getElementsByClassName(&quot;myClass2&quot;).style.display=&quot;none&quot;;
  }
  
  function myFunction2(){
  document.getElementsByClassName(&quot;myClass1&quot;).style.display=&quot;none&quot;;
  document.getElementsByClassName(&quot;myClass2&quot;).style.display=&quot;block&quot;;
  }
  &lt;/script&gt;
  </code></pre>