title: jQuery dynamically set id
body: <p>I'm trying to dynamically set a div id through jQuery. Yesterday, it seemed like the code was working, but today, it's complaining. </p>
  
  <p>The loop in question is: </p>
  
  <pre><code>    socket.on('nicknames', function (nicknames) {
      $('#nicknames').empty().append($('&lt;span&gt;Online: &lt;/span&gt;'));
        for (var i in nicknames) {
      $('#nicknames').append($('&lt;div class="chatNickname" id="' + nicknames[i] + '"&gt;').text(nicknames[i]));
        }
      });
  </code></pre>
  
  <p>The problem is, when I set the ID dynamically, the list of users is only one - the local user. If I set the ID to something static, it works, and the entire list of users is visible.</p>
  
  <p>I think it's a syntax issue, but from this page (http://www.dynamicdrive.com/forums/showthread.php?t=36730), I think I'm doing it right. </p>
  
  <p>Thanks for your help!</p>
  
  <p>The whole code is: </p>
  
  <pre><code>&lt;script src="http://&lt;?php print $_SERVER['SERVER_ADDR'] ?&gt;:8080/socket.io/socket.io.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    (function($){
      var myNick = 'me';
      var newlyJoined = true;
      var socket = io.connect('http://&lt;?php print $_SERVER['SERVER_ADDR'] ?&gt;:8080');
  
      socket.on('connect', function () {
        $('#chat').addClass('connected');
      });
  
      socket.on('announcement', function (msg) {
        $('#lines').append($('&lt;p&gt;').append($('&lt;em&gt;').text(msg)));
      });
  
          socket.on('nicknames', function (nicknames) {
          $('#nicknames').empty().append($('&lt;span&gt;Online: &lt;/span&gt;'));
            for (var i in nicknames) {
          $('#nicknames').append($('&lt;div class="chatNickname" id="' + nicknames[i] + '"&gt;').text(nicknames[i]));
            }
          });
  
      socket.on('user message', message);
      socket.on('reconnect', function () {
        $('#lines').remove();
        message('System', 'Reconnected to the server');
      });
  
      socket.on('reconnecting', function () {
        message('System', 'Attempting to re-connect to the server');
      });
  
      socket.on('error', function (e) {
        message('System', e ? e : 'A unknown error occurred');
      });
  
      socket.on('chat log', function(chatlog) {
        if (newlyJoined) {
      var i = 0;
      for (stamp in chatlog) {
        if (chatlog[stamp].type == 'user message') {
      var ts   = tstamp(stamp);
      var nick = chatlog[stamp].nick
      var msg  = chatlog[stamp].msg
      message(ts, nick, msg);
      i++;
        }
      }
      if (i &gt; 0) {
        $('#lines').append($('&lt;hr&gt;')).append($('&lt;small style="text-align:center; display:block; color: #888;"&gt;').text('Chat messages posted within the past half hour appear above this line.')).append($('&lt;hr&gt;'));
        $('#lines').get(0).scrollTop = 10000000;       
      }
      newlyJoined = false;
        }
      });
  
      function message (msg_time, from, msg) {
        $('#lines').append($('&lt;p&gt;').append($('&lt;small&gt;').text(msg_time)).append($('&lt;b&gt;').text(from), linkify(msg)));
      }
  
      function linkify(inputText) {
        //URLs starting with http://, https://, or ftp://
        var replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&amp;@#\/%?=~_|!:,.;]*[-A-Z0-9+&amp;@#\/%=~_|])/gim;
        var replacedText = inputText.replace(replacePattern1, '&lt;a href="$1" target="_blank"&gt;$1&lt;/a&gt;');
  
        //URLs starting with www. (without // before it, or it'd re-link the ones done above)
        var replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
        var replacedText = replacedText.replace(replacePattern2, '$1&lt;a href="http://$2" target="_blank"&gt;$2&lt;/a&gt;');
  
        //Change email addresses to mailto:: links
        var replacePattern3 = /(\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,6})/gim;
        var replacedText = replacedText.replace(replacePattern3, '&lt;a href="mailto:$1"&gt;$1&lt;/a&gt;');
  
        return replacedText
      }
  
      function tstamp(stamp) {
        var currentTime = new Date(); 
        if (typeof stamp != 'undefined') {
      currentTime.setTime(stamp);
        }
        var days = new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thr', 'Fri', 'Sat');
        var day = currentTime.getDay();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        if (minutes &lt; 10) {
      minutes = "0" + minutes;
        }
        if (hours &gt; 11) {
      var ap = 'p';
        }
        else {
      var ap = 'a';
        }
        if (hours &gt; 12) {
      hours = hours - 12;
        }
        return "["+ days[day] + " " + hours + ":" + minutes + ap + "m] ";
      }
  
      $(document).ready(function() {
  
        $('#nicknames').on('click', '.chatNickname', function(){ 
     alert("hello");
  });
  
        $('input#message').focus(function() {
      if ($(this).val() == 'Type your chat messages here...') {
        $(this).val('');
      }
        });
  
        $('input#show-timestamps').click(function() {
      if ($(this).is(':checked')) {
        $('#messages p small').show();
      }
      else {
        $('#messages p small').hide();
      }
        })
  
        socket.emit('nickname', '&lt;?php print $username ?&gt;', function (nick) {
      if (nick != 'me') {
        myNick = nick;
        socket.emit('get log');          
        return $('#chat').addClass('nickname-set');
      }
        });
  
        $('#send-message').submit(function () {
      message(tstamp(), myNick, $('#message').val());
      socket.emit('user message', $('#message').val());
      clear();
      $('#lines').get(0).scrollTop = 10000000;
      return false;
        });
  
        function clear () {
      $('#message').val('').focus();
        };
  
      });
    })(jQuery);
  &lt;/script&gt;
  &lt;div id="chat"&gt;
    &lt;div id="messages"&gt;
      &lt;div id="nicknames"&gt;
      &lt;/div&gt;
      &lt;div id="lines"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;form id="send-message" autocomplete="off"&gt;
      &lt;input id="message" type="text" value="Type your chat messages here..." autocomplete="off" /&gt;
      &lt;button&gt;Send&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  &lt;small&gt;&lt;input id="show-timestamps" type="checkbox" checked="checked" /&gt; Show timestamps&lt;/small&gt;a
  </code></pre>