typical page

@extends('layouts.app')

@section('content')
<div class="container auth">
    <div class="row">
        <div class="col-md-12">

            <div class="auth-heading">
                <h4 class="text-center" style="color:rgba(0, 0, 0, 1)"><strong>ALL CASES</strong></h4>
                <h5 class="text-center" style="color:rgba(0, 0, 0, 1)">List of all cases and Timeline for each</h5>
            </div>

            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        @forelse($allCases as $case)
                        <div class="col-sm-4 caseList"><br><br>
                            <a href="{{ url('case') }}/{{ $case->case_id }}">
                                <div class="box">
                                    <div class="box-icon">
                                        <span>&nbsp;Case ID : {{ $case->case_id }}&nbsp;</span>
                                    </div>
                                    <div class="info">
                                        <ul>
                                            <li id="y{{ $case->id }}">00<br class="time">YR(S)</li>
                                            <li id="d{{ $case->id }}">20<br>MT(S)</li>
                                            <li id="d{{ $case->id }}">30<br>WK(S)</li>
                                            <li id="d{{ $case->id }}">00<br>DY(S)</li>
                                            <li id="h{{ $case->id }}">00<br>HR(S)</li>
                                            <li id="m{{ $case->id }}">00<br>MI(S)</li>
                                            <li id="s{{ $case->id }}">00<br>SE(S)</li>
                                        </ul>
                                        <h5 class="text-center">{{ $case->detaineeName }}</h5>                    
                                        <h4 class="text-center">{{ $case->offence }}</h4>                    
                                    </div>
                                </div>
                            </a>
                        </div>
                        <script type="text/javascript">
                            window.onload=function() {
                            // Month,Day,Year,Hour,Minute,Second
                            upTime('{{ $case->created_at }}', 'y{{ $case->id }}', 'd{{ $case->id }}', 'h{{ $case->id }}', 'm{{ $case->id }}', 's{{ $case->id }}'); // ****** Change this line!
                            };
                        </script>
                        @empty
                            <div class="text-center" style="padding-top:70px; padding-bottom:70px;"><h4><strong>There are no cases available yet!!</strong></h4></div>
                        @endforelse
                    </div>
                </div>
                <h6 class="text-center"><strong>{{ $allCases->links() }}</strong></h6>
            </div>
        </div>
    </div>
</div>
@endsection

@section('extra-js')
<script type="text/javascript">
	function upTime(countTo, years, days, hours, minutes, seconds) {
	  now = new Date();
	  countTo = new Date(countTo);
	  difference = (now-countTo);
	  days=Math.floor(difference/(60*60*1000*24)*1);
	  years = Math.floor(days / 365);
	  if (years > 1){ days = days - (years * 365)}
	  hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
	  mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
	  secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
	  document.getElementById(years).firstChild.nodeValue = years;
	  document.getElementById(days).firstChild.nodeValue = days;
	  document.getElementById(hours).firstChild.nodeValue = hours;
	  document.getElementById(minutes).firstChild.nodeValue = mins;
	  document.getElementById(seconds).firstChild.nodeValue = secs;

	  clearTimeout(upTime.to);
	  upTime.to=setTimeout(function(){ upTime(countTo); },1000);
	}
</script>
@endsection

Follow this example:

<title>Count up</title>

Count up

It's been

00

days

00

hours

00

minutes

00

second

<script> function upTime(countTo, daysField, hoursField, minutesField, secondsField) { now = new Date(); countTo = new Date(countTo); difference = (now-countTo); days=Math.floor(difference/(60*60*1000*24)*1); hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1); mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1); secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1); document.getElementById(daysField).firstChild.nodeValue = days; document.getElementById(hoursField).firstChild.nodeValue = hours; document.getElementById(minutesField).firstChild.nodeValue = mins; document.getElementById(secondsField).firstChild.nodeValue = secs; //clearTimeout(this.upTime(countTo, daysField, hoursField, minutesField, secondsField)); this.upTime.to=this.setTimeout(function(){upTime(countTo, daysField, hoursField, minutesField, secondsField); },1000); } </script> <script> window.onload=function() { // Month,Day,Year,Hour,Minute,Second upTime('jan,0,2014,00:00:00', "daysField", "hoursField", "minutesField", "secondsField"); // ****** Change this line! } </script> <style> #countup p { display: inline-block; padding: 5px; background: #FFA500; margin: 0 0 20px; } </style>