show button based on a condition in Grails - grails

Question

in the Grails application i need to add Extend button when a condition is true ,
Here is my GSP :
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<g:sortableColumn property="adTitle"
title="${message(code: 'ads.adTitle.label', default: 'Ad Title')}" />
<g:sortableColumn property="adDetails"
title="${message(code: 'ads.adDetails.label', default: 'Ad Details')}" />
<g:sortableColumn property="duration"
title="${message(code: 'ads.duration.label', default: 'Duration')}" />
<g:sortableColumn property="dateCreated"
title="${message(code: 'ads.dateCreated.label', default: 'Creation Date')}" />
<g:sortableColumn property="durationDate"
title="${message(code: 'ads.durationDate.label', default: 'End Date')}" />
</tr>
</thead>
<tbody>
<g:each in="${adsInstanceList}" status="i" var="adsInstance">
<tr class="${(i % 2) == 0 ? 'even' : 'odd'}" >
<td><g:link action="show" id="${adsInstance.id}">
${fieldValue(bean: adsInstance, field: "adTitle")}
</g:link></td>
<td>
${fieldValue(bean: adsInstance, field: "adDetails")}
</td>
<td>
${fieldValue(bean: adsInstance, field: "duration")}
</td>
<td><g:formatDate date="${adsInstance.dateCreated}" formatName='date.humanView' /></td>
<td><g:formatDate date="${adsInstance.durationDate}" formatName='date.humanView' /></td>
<td id="test"> </td>
</tr>
<g:if
test="${formatDate(formatName:'date.humanView',date:adsInstance.durationDate) == formatDate(formatName:'date.humanView',date:new Date()+1)}">
<script type="text/javascript">
$(document).ready(
function() {
var add = $('<g:submitButton name="extendAd" value="Extend" />')
$('#test').append(add)
-
});
</script>
</g:if>
</g:each>
</tbody>
</table>
</div>
as the below screenshot shows when the Ad End date is 12-9-2016 the Extend button should appears , but as you can see it is showing 3 times in the first row only although it supposed to be shown in first,second and third rows.
Am i missing something in my GSP code?

Answer 1

You should do this without javascript:
<td id="test">
<g:if test="${formatDate(formatName:'date.humanView',date:adsInstance.durationDate) == formatDate(formatName:'date.humanView',date:new Date()+1)}">
<g:submitButton name="extendAd" value="Extend" />
</g:if>
</td>
If you want to do this with javascript, you cannot use an id (because id has to be unique) but a class:
<td class="test"></td>
...
<script type="text/javascript">
$(document).ready(
function() {
var add = $('<g:submitButton name="extendAd" value="Extend" />')
$('.test').append(add)
});
</script>