laravel - can not get data-id from modal

Question

I'm beginner in Laravel and jQuery/Ajax. I want to get 'data-id' from button of the modal but when I see in the console I'm getting 'undefined' issue, I can get 'name' value by the way. Where is the my problem?

My blade is:

@foreach($doctors as $doctor)
      <a href="javascript:void(0)" type="button" class="btn btn-primary"  data-toggle="modal" data-target="#appointmentModal" ></a> 
@endforeach

<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Appointment</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>

        <div class="modal-body">
            <form  id="addAppointment" novalidate>
                @csrf
                <div class="mb-3">
                    <label>Name</label>
                    <input type="text" class="form-control" id="nameR" name="name" required>
                </div>

                <button type="submit" class="btn btn-primary" data-id="{{$doctor->id}}">Save</button>
                </form>
        </div>
    </div>
    </div>
</div>

My jQuery/Ajax is:

$('#addAppointment').submit(function(e){
        e.preventDefault();

        var id = $(this).attr('data-id');
        let name = $("#nameR").val();

        console.log(id);
        
        $.ajax({
            url: "{{route('add_appointmentPost')}}",
            type:"POST",
            data:{
                name:name,
                _token:'{{ csrf_token() }}',
            },
            success:function(response){
                if(response){
                    $('#addAppointment')[0].reset();
                }
            }
        });


    });

Answer 1

@foreach($doctors as $doctor)
      <a href="javascript:void(0)" type="button" class="btn btn-primary openModal" data-id="{{$doctor->id}}"></a> 
@endforeach

<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Appointment</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="modal-body">
                <form  id="addAppointment" novalidate>
                    @csrf
                    <div class="mb-3">
                        <label>Name</label>
                        <input type="text" class="form-control" id="nameR" name="name" required>
                    </div>
                    <input type="hidden" id="docterId" />
                    <button type="submit" class="btn btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>
</div>

    $(document).on('click', '.openModal', function () {
        var id = $(this).data('id');
        $('#docterId').val(id);
        $('#appointmentModal').modal('show');
    })

    $('#addAppointment').submit(function(e){
        e.preventDefault();

        var id = $('#docterId').val();
        let name = $("#nameR").val();

        console.log(id);
        
        $.ajax({
            url: "{{route('add_appointmentPost')}}",
            type:"POST",
            data:{
                name:name,
                _token:'{{ csrf_token() }}',
            },
            success:function(response){
                if(response){
                    $('#addAppointment')[0].reset();
                }
            }
        });
    });