title: Assign unique ids to elements with same class
body: <p>I am creating a website in which I have two different buttons. </p>
  
  <p>By using jQuery, I want to hide and show two elements. Both elements are the text. e.g by click on <code>buttonA</code>, <code>textA</code> should show and if <code>textB</code> was visible, it should hide. similarly by click on <code>buttonB</code>, <code>textB</code> should show and if <code>textA</code> was visible, it should hide. Initially both the text should be hidden but loaded on their positions.</p>
  
  <p>Both the texts have same positioning on the layout. i have defined a class (.content is its name) which maintains all the styling for the text. Now the issue I am facing is that I have two div both with the class but I am unable to give two different ids to the texts.</p>
  
  <pre><code>.content {
    visibility:hidden;
    border-style: none;
    display: block;
    position: fixed;
    text-align: centre;
    z-index: 1;
    margin-top: 40%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: transparent;
    font-size:2.5em;
  }
  </code></pre>
  
  <p>The problem is here how to assign some unique ids also to both texts</p>
  
  <pre><code>&lt;div class="content"&gt;TextA goes here&lt;br&gt;&lt;/div&gt;
  &lt;div class="content"&gt;TextB goes here&lt;br&gt;&lt;/div&gt;
  </code></pre>
  
  <p>so when I use jquery</p>
  
  <pre><code>$("#ButtonA").click(function(){
    $("#TextA").show();$("#TextB").hide();
  });
  
  $("#ButtonB").click(function(){
    $("#TextB").show();$("#TextA").hide();
  });
  </code></pre>
  
  <p>Though it might be lame question but I couldnt figure it out myself so had to ask.</p>