How to use Jquery Template with MVC

Can you help me to check if the code has anything wrong?
I tried to push JSON first name. and the HTML codes do no show the value of firstname (Hajan). I also have webapi and try to push another firstname e.g. John. but it does not work as well. I also check and confirm the webapi is actually working. you can uncomment alert and see.

<div class="col-xl-12">
<div id="driver-list-feature" class="default-slick-carousel freelancers-container freelancers-grid-layout"></div>
</div>

Select allOpen in new window

<script id="ratingTemplate" type="text/x-jquery-tmpl">
  <div class="freelancer">${FirstName}</div>                    
</script>
<script type="text/javascript">
    document.addEventListener
    ('DOMContentLoaded',
    function ()
        {
        GetDriverListPost();
        },
        false);
    function GetDriverListPost() {
        var drivers = [ { 'FirstName': 'Hajan' } ];
        var model = '';
        var domain = '@System.Configuration.ConfigurationManager.AppSettings["Domain"]';
        model = {'FleetMasterType': 'Tow', 'DriverStage': 'Active'};
        $.ajax({
            type: "POST",
            url: "https://www.rnygroup.net/api/api/Driver/GetDriverList?type=json",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(model),
            success: function (data) {
                $.each(data, function (index)
                {
                    //alert(data[index].FirstName);
                    drivers.push({ 'FirstName': data[index].FirstName });
                });
                //$('#driver-list-feature1').append(trDriverData);
                $('#ratingTemplate').tmpl(drivers).appendTo('#driver-list-feature');
            },
            error: function (error) {
                alert("Error " + error);
            }
        });
    }
    </script>

Select allOpen in new window