title: jQuery With WebSocket
body: <p>I have a little confusion in the following snippet. I am trying to make a jQuery drop effect with user input data. This is working but only the first value given stays for rest of the click.</p>
  
  <p>Here are the snippets</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Pretech blog testing web sockets&lt;/title&gt;
  
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var webSocket = new WebSocket('ws://localhost:8080/jqueryWebTest/websocket2');
  
          webSocket.onerror = function(event) {
              onError(event)
          };
  
          webSocket.onopen = function(event) {
              onOpen(event)
          };
  
          webSocket.onmessage = function(event) {
              onMessage(event)
          };
  
          function onMessage(event) {
              alert(event.data);
              document.getElementById('messages').innerHTML += '&lt;br /&gt;'                    + event.data;
             // var myDiv = document.getElementById('dropDiv');
             // document.createElement(myDiv);
  
              $(function() {
                  setTimeout (function() {
                var $dropDiv = $('#dropDiv');
                var mythis = $('#holder a');
                // get position of the element we clicked on
                var offset = mythis.offset();
  
                // get width/height of click element
                var h = mythis.outerHeight();
                var w = mythis.outerWidth();
  
                // get width/height of drop element
                var dh = $dropDiv.outerHeight();
                var dw = $dropDiv.outerWidth();
  
                // determine middle position
                var initLeft = offset.left + ((w/2) - (dw/2));
  
                // animate drop
                $dropDiv.css({
                        left: initLeft,
                        top: $(window).scrollTop() - dh,
                        opacity: 0,
                        display: 'block'
                    }).animate({
                        left: initLeft,
                        top: offset.top - dh,
                        opacity: 1
                    }, 300, 'easeOutBounce');
               },1500);
              });
  
          }
  
          function onOpen(event) {
              document.getElementById('messages').innerHTML = 'Now Connection established';
          }
  
          function onError(event) {
              alert(event.data);
          }
  
          function start() {
              var text = document.getElementById("userinput").value;
  
              webSocket.send(text);
              return false;
          }
      &lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
  
  
  &lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  
  #holder {
   position: absolute;
   top: 200px;
   left: 100px;   
  }
  
  #dropDiv {
   display: none;
   position: absolute;
   top: -20px;
   background: #ccc; 
  }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
   &lt;div&gt;
          &lt;input type="text" id="userinput" /&gt; &lt;br&gt; &lt;input type="submit"
              value="Send Message to Server" onclick="start()" /&gt;
      &lt;/div&gt;
  &lt;div id="messages"&gt;&lt;/div&gt;
  &lt;div id="holder"&gt;&lt;a href="javascript:void(0);" id="main"&gt;Which ring?&lt;/a&gt;&lt;/div&gt;
  
  &lt;div id="dropDiv"&gt;The one ring to rule them all. &lt;/div&gt;
  &lt;div id="dropDiv"&gt;The one ring to rule them all. &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>websocket2.java</p>
  
  <pre><code>package com.test.websockets;
  
  import java.io.IOException;
  
  import javax.websocket.OnClose;
  import javax.websocket.OnMessage;
  import javax.websocket.OnOpen;
  import javax.websocket.SendResult;
  import javax.websocket.Session;
  import javax.websocket.server.ServerEndpoint;
  
  @ServerEndpoint("/websocket2")
  public class WebSocketTest2 {
  
      @OnMessage
      public void onMessage(String message, Session s) throws IOException,InterruptedException {
  
          System.out.println(message);
  
         // session.getBasicRemote().sendText(message);
  
          for (Session session : s.getOpenSessions()) {
              session.getBasicRemote().sendText("&lt;div id='dropDiv'&gt;"+message+" &lt;/div&gt;");           }
  
          // Sending message to client each 1 second
  
      }
  
      @OnOpen
      public void onOpen() {
          System.out.println("Client connected");
      }
  
      @OnClose
      public void onClose() {
          System.out.println("Connection closed");
      }
  }
  </code></pre>
  
  <p>What would be a solution?</p>