Assign unique ids to elements with same class
<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>
