Почему функция .hasClass не работает?

Question

Итак, мой код делает, когда я нажимаю на имя (class = 'frnd'), затем в результате откройте одно окно, и он будет перетаскиваем, но когда я снова нажму (class = frnd), то снова откроют новые окна, для Например, если я нажимаю на Simon, вы открываете новые окна, и после одного щелчка мышью можно перетаскивать, и еще раз я нажимаю на имя (class = 'frnd' (Simon)), его всплывающее окно еще раз. Проблема: я не хочу, чтобы, если окно уже открыто, оно не откроется снова в том же окне Саймона.

Для предотвращения этой проблемы я пытался этот код в 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); 
     } 

Я не знаю, почему разве работает 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

Элементов по их атрибуту ID выбираются с помощью символа особых отметок, так что

'.' + id должен быть '#' + id.

Символ точки (.) Выбирает элементы по их имени класса.

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

EDIT

Вы имели ряд других проблем, посмотреть на анализируемый код:

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

Answer 2

Проблема в том hasClass() не использует префикс периода для классов - это селектор синтаксис. Итак:

• var hwindow_div = $('.5647383'+id) найти свой .hwindow DIV,
• hwindow_div.hasClass('5647383'+id) проверяет, имеет ли класс.

A simple example.

PS. в то время как это отдельная проблема, @marekful правилен относительно синтаксиса #id.