Trying to get Card id for the selected card which is in @foreach loop

August 7, 2023

Good Morning,
I am new to Laravel and work on home project. Here i am trying to show the month name (12 month with year) in card which can be selected and then show the detail table showing the data for that selected month.
I get the month name in array and shown the same in card using for each loop. Now i want to select the card for any month and base on the id of that card (which is month+year) i need to get the data from database and show it in another table.
Here i am not able to get the card id for selected card (error – undefined).
below is the code

 <!--/ Card -->

    <div class="row">

      @foreach ($getmonths as $item )

        <div class="col-4 col-lg-2 mb-4">
          <div class="card maincard h-100 align-items-center getmonthsale">
            <a href="#" id="{{ $item }}" value ="{{ $getmonths[0] }}" name="{{ $item }}">
              <div class="row row-bordered g-0">

                <div class="card-header d-flex align-items-center justify-content-between pb-0 pt-3 mb-0">

                  <div class="card-title text-center d-flex align-items-center mb-0">
                    <h6>{{$item}}</h6>
                  </div>

                </div>

              </div>
            </a>
          </div>
        </div>

      @endforeach

    </div>

  <!--/ Card -->

code where i need to get the monthname and use to ajax for further action

 $(".getmonthsale").on("click", function(e) {
          e.preventDefault()
          var requested_to = $(this).attr("id")
          alert(requested_to);


          //$.ajax....
        })

image for ref.

Thanks in advance.

>Solution :

This should work as expected :

HTML

<div class="row">
    @foreach ($getmonths as $item)
        <div class="col-4 col-lg-2 mb-4">
            <div class="card maincard h-100 align-items-center getmonthsale" data-month="{{ $item }}">
                <div class="row row-bordered g-0">
                    <div class="card-header d-flex align-items-center justify-content-between pb-0 pt-3 mb-0">
                        <div class="card-title text-center d-flex align-items-center mb-0">
                            <h6>{{ $item }}</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach
</div>

javascript:

$(".getmonthsale").on("click", function(e) {
    e.preventDefault();
    var requested_to = $(this).data("month");
    alert(requested_to);
    // $.ajax...
});