I am trying to get id when i click to next arrow button but getting only first id using jquery

Question

i have carousal and i am trying to get id when i click to next button but unfortunately i am getting only first id on every click to next button how can i get id when click to button please help me thanks.

html view

                       <div class="d-flex carousel-inner">
                          @foreach ($roomCrousal as $key => $value)
                                @php
                                foreach ($value->roomDetail as $value2){
                                    $roomImage =$value->roomDetail->first()->image;
                                }
                                @endphp
                                <div class="carousel-item {{$key == 0 ? 'active' : '' }} d- 
                                    flex align-items-center">
                                    <img src="{{ Config('wfh.file') . $roomImage}}" height="113px" alt="First slide">
                                    <div class="ms-4">
                                        <p class="mb-2">{{$value->description ?? null }}</p>
                                        <input type="text" class="room_id"  name="room_id" value="{{$value->id}}" >
                                        <span class="badge bg-light-outline p-2 me-1"> <i class="bx bx-user"></i>{{$value->capacity ?? null }}</span>
                                        <span class="badge bg-primary p-2">Starts from PTS {{$value->points ?? null }}</span>
                                    </div>
                                </div>
                            @endforeach
                            <div class="w-100 d-flex justify-content-end align-items-center">
                                <div class="me-4">
                                    <button class="btn bg-primary-light px-2 me-2 py-1 carousel-control-prev butonSubmit" type="button"  data-mdb-target="#carouselExampleControls1" data-mdb-slide="prev"><i class='bx bx-chevron-left fs-4'></i></button>
                                    <button class="btn bg-primary-light px-2 me-2 py-1 carousel-control-next butonSubmit" type="button" data-mdb-target="#carouselExampleControls1" data-mdb-slide="next"><i class='bx bx-chevron-right fs-4'></i></button>
                                </div>
                            </div>
                      </div>

jquery

$(document).ready(function(){

    $(".butonSubmit").click(function(){
        let room_id = $(".room_id").val();
    $.ajax({
    url: "{{route('get-booking-slot')}}",
    type:"POST",
    data:{
    "_token": "{{ csrf_token() }}",
    room_id:room_id,
    },
    success:function(response){
    console.log(response);

    },
    error: function(response) {
    console.log(error);

    },
    });

    });

});