Get data-id attribute in jQuery

Hi! I used below code in controller and result show in nav for real time notification it's working.

if (result > 0) {
    foreach (result as res) {
        output .= '
      <li>
      <a>
      <strong>' . res["doc_id"] . '</strong><br />
      <small><em>' . res["doc_id"] . '</em></small>
      </a>
      </li>
      ';
    }
}

Now I want get doc_id from nav and send it to controller using ajax. My js code in below. How I cah get doc_id from ajax and send it to controller.

<script>
    $(document).ready(function(){
        // updating the view with notifications using ajax
        function load_unseen_notification()
        {
            var csrfName = $('.txt_csrfname').attr('name'); // CSRF Token name
            var csrfHash = $('.txt_csrfname').val(); // CSRF hash
            var id_doc = $('#id_doc').val();
 
            $.ajax({
                url:'user/view_status',
                method:"POST",
                data:{
                    [csrfName]: csrfHash,
                    id_doc: id_doc
                },
                dataType:"json",
                success:function(data)
                {
                    // Update CSRF hash
                    $('.txt_csrfname').val(data.token);
 
                    $('.dropdown-menu').html(data.notification);
                    if(data.unseen_notification > 0)
                    {
                        $('.count').html(data.unseen_notification);
                    }
                }
            });
        }
        load_unseen_notification();
        // load new notifications
        $(document).on('click', '.dropdown-toggle', function(){
            $('.count').html('');
            load_unseen_notification('yes');
        });
        setInterval(function(){
            load_unseen_notification();;
        }, 5000);
    });
</script>

<header>
    <div class="py-3">
        <div class="container">
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#" i class="fas fa-home"></i></a>
                    </div>
                    <ul class="nav navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Docemments</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">User profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Logout</a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" 
                                style="border-radius: 20px;"></span><span class="glyphicon glyphicon-bell fa-3x" style="font-size: 28px;"></span></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a data-id="1">
                                        <strong>Text</strong><br />
                                        <small><em>Description</em></small>
                                    </a>
                                    <a data-id="2">
                                        <strong>TextOne</strong><br />
                                        <small><em>DescriptionOne</em></small>
                                    </a>
                                    <a data-id="3">
                                        <strong>TextTwo</strong><br />
                                        <small><em>DescriptionTwo</em></small>
                                    </a>
                                    <a data-id="4">
                                        <strong>TextThree</strong><br />
                                        <small><em>DescriptionThree</em></small>
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <!-- header-top -->
</header>