Display data on List

[Akia85]

Hello,

I want use a list to display cities data on an element:

 <div>
        <script id="cruise-template" type="text/html">
            <div class="row">
                <a class="col-md-10 col-sm-10 col-xs-12 list-col-data"
                   href="">
                    <div class="col-xs-12 list-col list-col-date" style="height: 60px;">
                        <span class="date_days_wrap">
                        <span class="date_wrap"><span class="list-date">01 Oct</span><span class="list-year">2016</span></span>
                        <span class="days"><strong><%= Duration %></strong> days</span>
                        </span>
                    </div>
                    <div class="col-xs-12 list-col list-col-ship">
                        Silver Spirit<br>
                        <span class="ship-type"><%= CruiseType %></span><br>
                        <span class="list-results-voy-number"><%= id %></span>
                    </div>
                    <div class="col-xs-12 list-col list-col-voyage">
                        <div class="offer-label feature-eo"><span class="glyphicon glyphicon-star"
                                                                  aria-hidden="true"></span>
                            <span class="">offer</span></div>
                        <div class="features-wrapper clearfix">
                            <div class="feature-wrapper">
                                <div class="tooltip-spot "></div>
                            </div>
                            <div class="feature-wrapper">
                                <div class="tooltip-spot ">
                                    <div class="feature feature-1023858" data-toggle="tooltip" data-placement="top"
                                         data-pid="1023858"
                                         style=""
                                         title="Gastronomic excellence, wine and gourmet cruise"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="divPort" class="col-xs-12 list-col list-col-ports">
                        <ul  Id="ulPort" class="ports">
                             **<li><%= Cities %></li>**
                        </ul>
                    </div>
                    <div class="col-xs-12 list-col list-col-fares"><span class="list-price-lable font-weight-normal">all inclusive package:</span><br>
                        <span class="list-price"><%= FareFrom %><%= Currency %></span></div>
                </a>
                <div class="col-md-12 list-col list-col-request-btn">
                    <a name="" class="cta__searchresult_requestaquote "
                       href="">
                        <button class="btn_base btn_base-red btn_base-arrow upcase" type="submit">Request a Quote <span><i
                                    class="fa fa-angle-right"></i></span></button>
                    </a>
                </div>
            </div>
        </script>

The problem is that in that way i can't display on city for on <li. Do you have an advice to do it ?

I made this little code and tried to put in each filter_callbacks but it doesn't work.

function (records) {
        for (var i = 0; i < records.length; i++) {
            var option_cate = '<li class="item"><a>' + records.Cities[i] + '</a></li>';
            $("#ulPort").append(option_cate).
        }