!!!
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://code.jquery.com/jquery-1.6.1.min.js')
    script(src='/socket.io/socket.io.js')
    script
             $(document).ready(function() {
                var socket  = io.connect('http://localhost:3000');
                
                socket.on('populate', function(data) {
                var out = "";
                $.each(data, function(i, obj) {
                  console.log('<li>'+obj.name+' is making '+obj.salary+'</li>');
                  out += "<li>"+obj.name+" is making "+obj.salary+"</li>";
                });
                $('#employees').html(out);
                });
              
                $('.btnAdd').click(function() {
                var classname = $(this).attr("name")
                var num     = $('.' + classname).length; // how many "duplicatable" input fields we currently have
                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
                
                // create the new element via clone(), and manipulate it's ID using newNum value
                var newElem = $("."+classname+"#input" + num).clone().attr('id', 'input' + newNum);
                                
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
                
                // manipulate the name/id values of the input inside the new element
                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
 
                // insert the new element after the last "duplicatable" input field
                $("."+classname+"#input" + num).after(newElem);
                $("."+classname+"#input" + newNum).css('display', 'block');
 
                // enable the "remove" button
                $('.btnDel').prop('disabled',false);
 
                // business rule: you can only add 5 names
                if (newNum == 12)
                    $('#btnAdd').prop('disabled',true);
             });
 
             $('.btnDel').click(function() {
                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
                $('#input' + num).remove();     // remove the last element
 
                // enable the "add" button
                $('#btnAdd').prop('disabled',false);
 
                // if only one element remains, disable the "remove" button
                if (num-1 == 1)
                    $('#btnDel').prop('disabled',true);
             });
 
             $('.btnDel').attr('disabled',true);
             
             $('#save').click(function() {
                
                if ($('#employee_name').val() == '' || $('#employee_salary').val() == '') {
                  return alert('Please enter both nam e/salary!');
                }
                var data = {
                  name: $('#employee_name').val(),
                  salary: $('#employee_salary').val()
                };
                console.log('socketpoking: ' + 'data');
                socket.emit('add employee', data);
                $('#employee_name').val('');
                $('#employee_salary').val('');
              });

             });

  body!= body