Datetime picker not working in dynamic modal

I have a dynamic modal which has a datetime picker

each modal has a uniqe ID according user id

My problem is the datetime picker field works only for the first record .. I know that happens because the java script for date time picker fired one time unlike the modal .. so how to figure it out !!?

I tried to initialize the script in the modal file but it not working

My View

@extends('layouts.master')
@section('content')
<div class="col-md-12">
    <div class="card">
        <div class="card-header d-flex align-items-center">
            <h3 class="card-title">{{ __('site.users') }}</h3>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
            <table>
                <thead>
                    <tr>
                        <th class="th-sm">Id</th>
                        <th class="th-sm">{{ __('site.name') }}</th>
                        <th class="th-sm"> </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $user)
                    <tr>
                        <td>{{ $user->id }}</td>
                        <td>{{ $user-> name }}</td>

                        <td class="text-center">
                            <a href="#" class="btn btn-default btn-sm" data-toggle="modal" datatarget="#modal-default-{{ $user->id }}">District</a>
                        </td>
                    </tr>
                    @include('dashboard.users.modals.addNdistrict', ['user_id' => $user->id])

                    @endforeach
                </tbody>

            </table>
        </div>
    </div>
</div>

@endsection

Modal

<div class="modal fade" id="modal-default-{{ $user_id }}" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('dashboard.users.addNdistrict', $user->id) }}" method="post">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- joined_at -->
                    <div class="form-group row">
                        <label for="joined_at" class="col-md-3 col-form-label text-md-left required">{{ __('site.joined_at') }}</label>
                        <div class="col-md-8">
                            <div class="input-group date">
                                <input type="text" name="joined_at" value="{{ old('joined_at') }}"
                                    id="joined-date" class="form-control" data-date-end-date="0d">
                            </div>
                        </div>
                    </div>
                    <!-- ./joined_at -->

                  </div>
                <!--./modal_body-->
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </div> <!-- /.modal-content -->
        </form>
    </div> <!-- /.modal-dialog -->
</div>

<!-- jQuery -->
<script src="{{ asset('adminlte/plugins/jquery/jquery.min.js') }}"></script>  
<!-- DateTimePicker -->
<script src="{{ asset('adminlte/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js') }}" defer></script>

<script>

    $(document).ready(function () {
        $('#joined-date').datepicker({
            todayHighlight: true,
            todayBtn: "linked",
            format: "yyyy-m-d",
            autoclose: true,
        });
    }); //document

</script>