title: jquery returns [object Object]
body: <p>I have a little question about an issue I'm dealing with quite a long time now: I have an HTML which displays a list of items, stored in h2db. These items show up correctly.</p>
  
  <pre><code>&lt;tr th:each="item : ${list}"&gt;
    &lt;td th:text="${item.getActualcost()}" id="actualcost"&gt;Actual Cost&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I now would like to add another column to this list, showing a progress bar.</p>
  
  <p>I added this code to the HTML-part:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div class="progress"&gt;
            &lt;div id="progressPlaceholder"&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The script-part looks like this:</p>
  
  <pre><code>&lt;script&gt;
      var rank=$('actualcost'),place=4;
      var progress = '&lt;div class="progress-bar" role="progressbar" aria-valuenow="'+rank+'" aria-valuemin="0" aria-valuemax="100" style="width: '+rank+'%;"&gt;&lt;span class="show" id="totalUsers"&gt;Ranked '+place+' of '+rank+'&lt;/span&gt;&lt;/div&gt;';
      $('#progressPlaceholder').empty().append(progress);
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem is, that the progress bar is not beinge filled out correctly. So I tried to find out what value it gets by adding '+rank+'. Unforntunately I get only [object Object] printed out. Can someone help me please with that problem? The value should be an int.</p>