Why is Jquery not opening dialog from subsequent datable pages?

Question

I have a list of over 3000 items populated into a table and paginated

       @foreach ($programs as $program)
                                        <tr>
                                            <td>{{ $program->id }}</td>
                                            <td>
                                                @if ($program->module == 'dmodule')
                                                    Direct Training Module
                                                @elseif ($program->module == 'emodule')
                                                    Equivalence Module
                                                @elseif ($program->module == 'gmodule')
                                                    Generalization Module
                                                @else
                                                    Transformation Module
                                                @endif
                                            </td>
                                            <td>
                                                {{ $program->title }}
                                            </td>
                                            <td>
                                                <div class="col-md-6">
                                                    <button type="button" class="btn btn-md programDetails"
                                                        data-id="{{ $program->id }}">
                                                        <i class="fa fa-file" aria-hidden="true"></i>
                                                    </button>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="col-md-6">
                                                    <a href="{{ $program->video_link }}" class="btn btn-md"><i
                                                            class="fa fa-video" aria-hidden="true"></i></a>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="col-md-6">
                                                    <a href="{{ route('program.print', $program->id) }}"
                                                        class="btn btn-md"><i class="fa fa-print"
                                                            aria-hidden="true"></i></a>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="row">
                                                    <div class="col-md-4">
                                                        @if ($client->hasProgram($program->id))
                                                        @else
                                                        <button type="button" class="btn btn-xs btn-success programAttachment"
                                                        data-id="{{ $program->id }}" data-filter="{{ $client->id }}" >
                                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                                    </button>
                                                        @endif
                                                    </div>
                                                    <div class="col-md-4">
                                                        <a href="{{ route('programs.edit', $program->id) }}"
                                                            class="btn btn-xs btn-warning" data-toggle="tooltip"
                                                            data-placement="top" title="Edit"><i class="fa fa-pen"
                                                                aria-hidden="true"></i></a>
                                                    </div>
                                                    <div class="col-md-4">
                                                        <form action="{{ route('programs.destroy', $program->id) }}"
                                                            method="POST" class="form-inline">
                                                            <button class="btn-danger btn-xs" data-toggle="tooltip"
                                                                data-placement="top" title="Delete"><i
                                                                    class="fa fa-trash"></i></button>
                                                            {{ method_field('DELETE') }}
                                                            {{ csrf_field() }}
                                                        </form>
                                                    </div>
                                                </div>

                                            </td>
                                        </tr>
                                    @endforeach

In the table I have button that is used to show a dialog with more information about the programs. This buttons event is handled by javascript code as follows

       $(document).ready(function() {

        $('.programDetails').on('click',function() {

            var progid = $(this).data('id');
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            // AJAX request
            $.ajax({
                url: '/carriculumbank/program',
                type: 'post',
                data: {
                    _token: CSRF_TOKEN,
                    progid: progid
                },
                success: function(response) {
                    // Add response in Modal body
                    $('.modal-content').html(response);
                    $(".modal-dialog").css("width", "90%");
                    // Display Modal
                    $('#programModal').modal('show');
                }
            });
        });
    })

Now my problem is that this works only on the first page but not for any of the subsequent pages. What could be the issue and how can I solve it?