Why .hasClass function isnt working?

Question

So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.

For avoid this problem i was trying this code in js

if(!($("#windows").hasClass('.5647383'+id))){
                $html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
                $('#windows').append($html);
        }

I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).

$(document).ready(function(){
    $('.frnd').click(function(){
        var id = $(this).attr("id");
        var usr=$(this).text();
        var exst = document.getElementsByClassName('.5647383'+id); 
        if($("#windows").hasClass('.5647383'+id)){
            $html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
            $('#windows').append($html);
    }
    });

    $('#windows').on('click','.cls', function(){
      $(this).parent().parent().hide();
    });

    $(function(){ 
        $('.frnd').click(function(){
      var id = $(this).attr("id");
      $('#windows').on('click','.'+id,function(){
        $(this).parent().draggable({
          handle: ".hwindow",
          containment:"body"
        });
      });
        });
    });
});

body {
  margin: 0;
  background-color: #999;
  height: 700px;
  }
.frnd {
  text-align: center;
  width: 50px;
  height: 20px;
  display: inline-block;
  background-color: #9B59B6;
  margin: 5px;
  border: 4px solid #3498DB;
  color: #F1C40F;
  cursor: pointer;
  float: right;
  }
.mwindow {
  position: fixed;
  width: 220px;
  height: 220px;
  border: 5px solid #16a085;
  background-color: #fff;
  display: block;
  margin: 5px;
  border-radius: 10px;
}
.mwindow:hover {
  z-index: 9999;
  }
.hwindow {
  width: 210px;
  height: 25px;
  background-color: #FF4500;
  padding: 5px;
  display: block;
  margin: 0px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.cls {
  display: inline-block;
  float: right;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  }
.msgbody {
  position: relative;
  height: 185px;
  background-color: #FF4500;
  //z-index:9999;
  }
.ctarea {
  position: absolute;
  width: 210px;
  resize: none;
  outline: none;
  top: 133px;
  font-size: 15px;
  padding: 5px;
  min-height: 40px;
  opacity: 0.9;
  border: none;
  border-top: 2px solid #ff0000;
  }
#mstd {
  position: absolute;
  width: 220px;
  height: 133px;
  background-color: #bb4500;
  opacity: 1;
  overflow-x: hidden;
  }

<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
  <li id="8" class="frnd">John</li>
  <li id="9" class="frnd">Henry</li>
  <li id="10" class="frnd">Max</li>
  <li id="11" class="frnd">Simon</li>
<div id="windows"></div>

Answer 1

Elements by their ID attribute are selected using the hashmark symbol, so

'.' + id should be '#' + id.

The dot symbol (.) selects elements by their class name.

http://codepen.io/anon/pen/qdaXgX

EDIT

You had a number of other problems, look at the reviewed code:

http://codepen.io/anon/pen/bdwaWx

Answer 2

The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:

• var hwindow_div = $('.5647383'+id) will find your .hwindow div,
• hwindow_div.hasClass('5647383'+id) checks whether it has the class.

A simple example.

PS. while it’s a separate problem, @marekful is correct about the #id syntax.