jquery returns [object Object]
<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>