Add bootstrap popover manage with Handlebars for a button inside a table - html-table

Question

I have custom a popover that I use inside a table, the problem it's whether to put the div to which i will inject the markup of the populated popover with handlebars. I must find a solution to incorporate the part of handlebars.
Or alternatively it is possible to render handlebars in another way?
There's another way for insert div with popover in a table?
<script id="handlePopoverDesk" type="text/x-handlebars-template">
<div id="list-popover" class="hide">
<div class="closePopover">X</div>
<ul class="nav nav-pills nav-stacked">
{{#each deskType}}
<li data-id="{{id}}" data-select="false" data-type="media" style="cursor:pointer;margin:2px 0 2px 0;"><a>{{type}}</a></li>
{{/each}}
</ul>
<br />
<button style="display: block; margin: 0 auto;" class="btn btn-primary btn-sm" data-target="#modal-addNewCategoryDesk" data-toggle="modal"><i class="fas fa-plus-square"></i>&nbsp Aggiungi</button>
</div>
</script>
var sourceDeskMedia = $("#handlePopoverDesk").html();
var templateDeskMedia = Handlebars.compile(sourceDeskMedia);
<tr data-id="{{id}}" data-category="0">
#*<td> <input type="checkbox" class="select-element"></td>*#
<td class="responsivePressCoverageTable col-md-2 col-sm-2 col-xs-2">{{#simplifyDate publishingDate}}{{/simplifyDate}}</td>
<td class="responsivePressCoverageTable col-md-8 col-sm-8 col-xs-8">
<a style="text-decoration:none;font-weight: bold;" href="{{linkMedia}}" target="_blank">{{media}}</a><br />
<a class="coverage-purchase" style="text-decoration:none;cursor:pointer;" data-target="#modal-purchase" data-toggle="modal" dataId="{{id}}">{{article}}</a><br />
<a style="text-decoration:none; font-style: italic;" href="{{linkJournalist}}" target="_blank">{{journalist}}</a>
</td>
<td class="col-md-1 col-sm-1 col-xs-1">{{#checkPurchase purchase}}{{/checkPurchase}}</td>
#if (isProfessional)
{
<text>
<td class="col-md-1 col-sm-1 col-xs-1"><button data-toggle="popoverFavorite" title="Salva in:" data-popover-content="#list-popover" data-placement="left" data-id="{{id}}" data-fav="{{savefavoriteElements}}" class="btn btn-warning btn-xs iPressShare">Salva &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button></td>
<div class="setDeskPressCoveragePaper row margin-10" data-id="{{id}}"></div>
</text>
}
else
{
<text>
<td></td>
</text>
}
</tr>

Answer 1

I solved by doing so:
#if (isProfessional)
{
<text>
<td class="col-md-1 col-sm-1 col-xs-1"><button data-toggle="popoverFavorite" title="Salva in:" data-popover-content="#list-popover" data-placement="left" data-id="{{id}}" data-fav="{{savefavoriteElements}}" class="btn btn-warning btn-xs iPressShare">Salva &nbsp<i class="iPressIconShare fas fa-share-alt"></i></button>
<div class="setDeskPressCoveragePaper row margin-10" data-id="{{id}}"></div>
</td>
</text>
}
else
{
<text>
<td></td>
</text>
}
I inserted the DIV inside the TD