Dynamic Modal Input Field Value

The project involves $certificates under $programs. There are scenarios when a $certificate needs to be cloned to a $program.

My modals are outside the CRUD views - they're in the resources\views\partials\modals.blade.php file.

When cloning a certain $certificate, I want its title to dynamically appear in a disabled input field on the modal but I can't figure out where to go from there.

Here's my setup:

script.js

$("[id^=clone-certificate]").click(function() {
    var matches = this.id.match(/\d+$/);
    $("#form-clone-certificate").attr("action", "/certificates/" + parseInt(matches[0]) + "/clone");
});

\resources\views\certificates\index.blade.php

@foreach($programs as $program)
    <h3>{!! $program->active == 0 ? "<del>$program->title</del>" : $program->title !!}</h3>
    <table class="table table-bordered table-striped">
        <thead>
            <th>#</th>
            <th>Certificate</th>
            <th>Action</th>
        </thead>

        <tbody>
            @php $i = 1; @endphp
            @foreach($certificates as $certificate)
                @if($certificate->course_id == $program->id)
                    <tr>
                        <td></td>
                        <td><a href="" target="_blank">{!! $certificate->certificate_active == 0 ? "<del>$certificate->certificate_desc</del>" : $certificate->certificate_desc !!}</a></td>
                        <td class="word-spacing-5">
                            @if($certificate->certificate_active == 0)
                                <a href="#" title="Show "><i class="fas fa-eye"></i></a>
                            @else
                                <a href="#" title="Hide "><i class="fas fa-eye-slash"></i></a>
                            @endif

                            <a href="#" id="clone-certificate" title="Clone " data-toggle="modal" data-target="#modal-clone-certificate"><i class="fas fa-clone"></i></a>
                        </td>
                    </tr>
                @endif
            @endforeach
        </tbody>
    </table>
@endforeach

\resources\views\partials\modals.blade.php

<div class="modal fade" id="modal-clone-certificate" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-warning">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"><i class="fas fa-clone"></i> Clone Certificate</h4>
        </div>

        <form method="POST" action="/certificates" id="form-clone-certificate">
            @csrf

            <div class="modal-body">
                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fas fa-certificate"></i></div>
                        <input type="text" name="title" id="input-clone-certificate" class="form-control" disabled>
                    </div>
                </div>

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon"><i class="fas fa-graduation-cap"></i></div>
                        <select name="program" id="program" class="form-control">
                            <option value="">Program</option>
                            @foreach($programs as $program)
                                <option value=""></option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="submit" class="btn btn-primary"><i class="far fa-save"></i> Save</button> <button class="btn btn-danger" data-dismiss="modal"><i class="fas fa-ban"></i> Cancel</button>
            </div>
        </form>
    </div>
</div>

via Chebli Mohamed