Not able to get Month Name from card header where card is in loop

Good Evening,

I am new to Laravel and working on home project.

I am trying to get the card header ( Month Name ) which is in loop showing all months for current financial year. When i click on more info, i need modal showing day wise data for selected month using ajax. But not able to get month for selected card. Its showing only "Apr-22" for all cards.

Blade File

@foreach ($totalmilkselldataforyeartotable as $item)
<div class="card border-success " style="width: 12rem;">
    <div class="card-header">
        <span id="monthname"> <strong>{{ $item['monthname'] }}</strong>  </span> 
    </div>
        <ul class="list-group list-group-flush">
                                                                
          <li class="list-group-item">Total Milk - &nbsp;<strong>{{ $item['totalmilk'] }} </strong></li>
                                                                
        </ul>
    <button type="button" class="btn btn-link">
        <span id="getmonthmilkdetails" class='glyphicon glyphicon'> More <i class="fas fa-arrow-circle-right"></i> </span>
    </button>
</div>@endforeach

Ajax

headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} });

                var $getmonthnameforajax = $('#monthname').text()
                
                $(document).on('click', '#getmonthmilkdetails', function() {

                    $.ajax({

                        type: 'post',
                        url: '/getmonthmilkdetails',
                        data: {
                            '_token'            : $('input[name=_token]').val(),
                            'monthname'         : $getmonthnameforajax,
                        },

                        success: function(data) { }

Thanks in Advance