Marking notifications as read

I recently came across a tutorial on how to implement notifications rather easily in to a Laravel application, and so I followed Part 1 and Part 2 of these tutorials and have notifications working - which is great.

What the tutorials don't cover is a good system for marking these as read, as I guess this all depends on how you want to do it.

For simplicity sake, when the user clicks on my notification banner, I want to mark any new notifications in there as read - I'm just not certain how to do this.

I think this could be achieved with some jQuery and fetching the id's of the element that all start with notification- (e.g notification-1, notification-2).

This is what the notification part of my view looks like:

<!-- Notifications Menu -->
<li class="dropdown notifications-menu">
            <!-- Menu toggle button -->
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-bell-o"></i>
              <span class="label label-warning">@if (Auth::user()->notifications()->unread()->count() > 0)
                  
                @endif</span>
            </a>
            <ul class="dropdown-menu">
              <li class="header">You have  new notifications</li>
              <li>
                <!-- Inner Menu: contains the notifications -->
                <ul class="menu">
                  <li><!-- start notification -->
                  @if (Auth::user()->notifications()->unread()->count() == 0)
                    <a href="#">
                      <i class="fa fa-bullhorn text-aqua"></i> Start using the site to get notifications.
                    </a>
                  @else
                    @foreach (Auth::user()->notifications()->unread()->get() as $notification)
                      <a href="#" id="notification-">
                        <i class="fa fa-bullhorn text-green"></i> 
                      </a>
                    @endforeach
                  @endif
                  </li><!-- end notification -->
                </ul>
              </li>
              
            </ul>
          </li>

This part holds the count of the notifications and displays this to the user, having nothing inside the span will mean that no notification indicator is shown:

<span class="label label-warning">
    @if (Auth::user()->notifications()->unread()->count() > 0)
        
    @endif
</span>

And each notification is populated, using the below:

@foreach (Auth::user()->notifications()->unread()->get() as $notification)
    <a href="#" id="notification-">
        <i class="fa fa-bullhorn text-green"></i> 
        
    </a>
@endforeach

What is the best way to grab the displayed notification IDs, post them to a route (so they can be marked as read) and clear the span that shows the notification count?

I can figure out the ajax call, I just need help getting started - specifically with how to grab all the IDs and clearing the span.

via Chebli Mohamed