JS Toogle doesnt work correctly

[phoenix254]

Hi everyone,
Here i upload my live code

HTMl source:

`<span class="Maxi" id="frnd">Maxi</span>
<span class="John" id="frnd">John</span>
<span class="Henry" id="frnd">Henry</span>
<span class="Max" id="frnd">Max</span>
<span class="Simon" id="frnd">Simon</span>

  <div id="warp">
   <div id="chatwindow">
      <div id="chathead">
        <span id="uname"></span>
        <div id ="close">&times;</div>
      </div>
      <div id="msgbody">
      <textarea id="textar" ></textarea>
    </div>
    </div>
  </div>
`

Js source

$(document).ready(function(){
$('span').on('click', function(){
var name=$(this).attr("class");


$("."+name).click(function(){
    $("#chatwindow").toggle('#hide');
    document.getElementById("uname").innerHTML = name;
});
});

Why i have to click two times on span class (from html source) for toggle it;??
and why it is toggling 3 0 4 times ?

[gentlemedia]

Someone else told you already that you can only have one unique ID on a page, but you still have 5 here. Multiple classes is okay, so you should have something like this instead:

<span id="Maxi" class="frnd">Maxi</span>
<span id="John" class="frnd">John</span>
<span id="Henry" class="frnd">Henry</span>
<span id="Max" class="frnd">Max</span>
<span id="Simon" class="frnd">Simon</span>

[phoenix254]

but its same problem
here is my js

$('span').on('click', function(){
var name=$(this).attr("id");
//document.getElementById("uname").innerHTML = txt;


$("#"+name).click(function(){
    $("#chatwindow").toggle('#hide');
    //document.getElementById("uname").innerHTML = name;
});
});

html

<span id="Maxi" class="frnd">Maxi</span>
<span id="John" class="frnd">John</span>
<span id="Henry" class="frnd">Henry</span>
<span id="Max" class="frnd">Max</span>
<span id="Simon" class="frnd">Simon</span>

   <div id="chatwindow">
      <div id="chathead">
        <span id="uname"></span>
    <div id ="close">×</div>
  </div>
</div>

css

.frnd{
text-align:center;
//display:inline-block;
display:block;
width:50px;
height:20px;
background-color:#9B59B6;
margin:5px;
border:4px solid #3498DB;
color:#F1C40F;
cursor:pointer;
}
#chatwindow{
  width:150px;
  height:200px;
  border:2px solid #16a085;
  display:none;
}
#hide{
display:block;
}

[gentlemedia]

make it a class hide, because an element can't have two ID's either and toggle that class instead.

$("#chatwindow").toggleClass("hide");

[phoenix254]

https://docs.google.com/file/d/0B93vyI8naA3OXzV3WFpfdG5rRDA/edit?usp=drivesdk here i uploaded my demo video for problem. The same problem i have to click 2 o more time to toggle it and then dont know toogle will hide it or show that element