Display basic time value (in 12-hours format) using jquery in .Net Web Apps.

Design view (.cshtml Razor View where the div was taken to show the time value)

@{
                        DateTime dt = DateTime.Now;
                        var time = dt.ToString("hh:mm tt");
                        var tArr = time.Split(' ');
                    }

<div class="date_time">
                       @* Displaying the date value *@
                        <div class="date" id="divDateOnly"><i class="fa fa-calendar" aria-hidden="true"></i>@dt.ToString("MMM - dd - yyyy")</div>

                       @* Displaying the time value and this needs to be refreshed every second. *@
                        <div class="time" id="divTimeOnly"><i class="fa fa-clock-o" aria-hidden="true"></i>@tArr[0]_@tArr[1]</div>
</div>


/* function to convert the date to time value in 12-hour format */
function formatAMPM(date) {
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var ampm = hours >= 12 ? 'pm' : 'am';
            hours = hours % 12;
            hours = hours ? hours : 12; // the hour '0' should be '12'
            hours = hours < 10 ? '0'+ hours : hours;
            minutes = minutes < 10 ? '0'+ minutes : minutes;
            var strTime = hours + ':' + minutes + ' ' + ampm;
            return strTime;
        }

/* set the interval at 1 second at document ready function */
$(document).ready(function(){
     setInterval(function() {
                var d = new Date();
                var monthName = monthNames[d.getMonth()];
                var day = d.getDate();
                var year = d.getFullYear();
                var time = formatAMPM(d);
                var tArray = time.split(' ');
                console.log(time);
                $("#divTimeOnly").html('<i class="fa fa-clock-o" aria-hidden="true"></i>' + tArray[0] +                      '_{' + tArray[1] + '}');
                },1000);
});