title: Issue adding multiple visualforce components to a page
body: <p>Im using a visualforce component multiple times on a page but the hover doesnt open any of the dialogs. I guess it is due to the ids but Im not sure what to do to fix.</p>
  <p>Here is eg of the code for the visualforce component</p>
  <pre><code>&lt;apex:attribute name=&quot;Contents&quot; description=&quot;display message&quot; type=&quot;string&quot; required=&quot;true&quot; assignto=&quot;{!DialogMessage}&quot; /&gt;
  &lt;style&gt;
          .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
          }
          
          /* Modal Content */
          .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            height: 80px;
            -moz-border-radius: 15px !IMPORTANT;
            border-radius: 15px !IMPORTANT;
          }
          
          /* The Close Button */
          .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            margin-top: -20px
          }
          
          .close:hover,
          .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
          }
  
  
          a.ActionObject:hover#ModalBox1 {
              display:inline;
          }
          &lt;/style&gt;        
          &lt;a id=&quot;ActionObject&quot; &gt;        
              &lt;img src=&quot;/s.gif&quot; /&gt;
          &lt;div id=&quot;ModalBox1&quot; class=&quot;modal&quot;&gt;
              &lt;!-- Modal content --&gt;
              &lt;div class=&quot;modal-content&quot;&gt;
                  &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
                  &lt;p&gt;&lt;center&gt;{!DialogMessage}&lt;/center&gt;&lt;/p&gt;
              &lt;/div&gt;
          
          &lt;/div&gt;
      &lt;/a&gt;
  
  The part that is the issue is 
          a.ActionObject:hover#ModalBox1 {
              display:inline;
          }
  </code></pre>
  <p>Ive tried using javascript and have used different methods in css such as using ~ etc but none worked
  If I use javascript then somehow the javascript will need to identify the correct Id to know which component to show</p>