title: How to make id of elements written by JSTL available for scripting?
body: <p>I'm developing a web app using Twitter-Bootstrap editable and Java Servlet Backend.
  Using JSTL to render table data, and hooking up editable data form is not working. 
  JS developer console, show undefined, so it's not recognizing element id's produced inside foreach in JSTL.
  Tried to wrap editable JS call on document ready, does not work.
  I guess the problem is how to make id of elements written by JSTL available for scripting.</p>
  
  <pre><code>&lt;%--
      Document   : index
      Created on : 20/Abr/2013, 23:52:35
      Author     : Arthur
  --%&gt;
  &lt;%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %&gt;
  &lt;%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %&gt;
  
  &lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;meta name="description" content=""&gt;
          &lt;meta name="author" content=""&gt;
  
          &lt;!-- Bootstrap CSS--&gt;
          &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
          &lt;!-- Bootstrap DatePicker CSS--&gt;
          &lt;link href="css/datepicker.css" rel="stylesheet" media="screen"&gt;
          &lt;!-- Bootstrap Editable CSS--&gt;
          &lt;link href="css/bootstrap-editable.css" rel="stylesheet" media="screen"&gt;
          &lt;!-- JQUERY --&gt;
          &lt;script src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap JS--&gt;
          &lt;script src="js/bootstrap-2.0.2.js"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap DatePicker JS--&gt;
          &lt;script src="js/bootstrap-datepicker.js"&gt;&lt;/script&gt;
          &lt;!-- Bootstrap EdiTable JS--&gt;
          &lt;script src="js/bootstrap-editable.js"&gt;&lt;/script&gt;
          &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
              $(window).load(function(){
                  $('.dropdown-toggle').dropdown();
              });//]]&gt;  
          &lt;/script&gt;
  
          &lt;style&gt;
              body {
                  padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
                  padding-bottom: 40px;
                  background-color: #f5f5f5;
              }
  
          &lt;/style&gt;
          &lt;title&gt;.:StaffGest:.&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!--        &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;--&gt;
          &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
              &lt;div class="navbar-inner"&gt;
                  &lt;div class="container"&gt;
                      &lt;a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-inverse-collapse"&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                      &lt;a class="brand" href="#"&gt;.:StaffGest:.&lt;/a&gt;
                      &lt;div class="nav-collapse collapse navbar-inverse-collapse"&gt;
                          &lt;ul class="nav"&gt;
                              &lt;li class="active"&gt;&lt;a href="index.jsp"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Funcionários&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Novo&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Editar&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Apagar&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="divider"&gt;&lt;/li&gt;
                                      &lt;li class="nav-header"&gt;Pesquisar&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Pesquisar Funcionário&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Listar Todos&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /navbar-inner --&gt;
          &lt;/div&gt;&lt;!-- /navbar --&gt;
  
          &lt;div class="container"&gt;
              &lt;h1&gt;Lista Funcionários:&lt;/h1&gt;
              &lt;table class="table"&gt;  
                  &lt;thead&gt;  
                      &lt;tr&gt;  
                          &lt;th&gt;Nome&lt;/th&gt;  
                          &lt;th&gt;Apelido&lt;/th&gt;  
                          &lt;th&gt;Data Nascimento&lt;/th&gt;  
                          &lt;th&gt;Email&lt;/th&gt;  
                      &lt;/tr&gt;  
                  &lt;/thead&gt;  
                  &lt;tbody&gt;  
                      &lt;c:forEach items="${list}" var="employee"&gt;
                          &lt;tr&gt; 
                              &lt;td&gt;&lt;a href="#" id="firstName" name="firstName"data-type="text" data-pk="${employee.id}" data-url="employee.do" data-original-title="Nome"&gt;${employee.firstName}&lt;/a&gt;&lt;/td&gt;  
                              &lt;td&gt;&lt;a href="#" id="lastName" name="lastName" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"&gt;${employee.lastName}&lt;/td&gt; 
                              &lt;td&gt;&lt;a href="#" id="dob" name="dob" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"&gt;&lt;fmt:formatDate value="${employee.dob}" pattern="MM/dd/yyyy"/&gt;&lt;/td&gt; 
                              &lt;td&gt;&lt;a href="#" id="email" name="email" data-type="text" data-pk="${employee.id}" data-url="/post" data-original-title="Nome"&gt;${employee.email}&lt;/td&gt; &lt;/tr&gt; 
                          &lt;/c:forEach&gt;
  
                  &lt;/tbody&gt;  
              &lt;/table&gt;  
          &lt;/div&gt; &lt;!-- /container --&gt;
          &lt;script&gt; 
                  $('#firstName').editable({
                  });
                  $('#lastName').editable({
                  });
                  $('#dob').editable({
                  });
                  $('#email').editable({
                  });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>