get a data-attribute (data-phone) value from the selected datalist option

how to get a data-attribute (like:- data-phone ) value from the selected datalist option which is selected;
It send me just value not data attribute.

i want to set data-phone of input from data-phone of datalist > option

How can I set this? Help

Html:

     <input type="text" name="patirnt_name" id="patirnt_name" list="patient_list" onfocus="getAllPatients()" value="" data-phone="">
         <datalist id="patient_list">

         </datalist>

JQuery:

function getAllPatients() {
            let url = "{{ route('get-all-patient-ajax') }}";
            let list = $('#patient_list');

            let html = '';
            $.ajax({
                url: url,
                type: "GET",
                success: function(res) {
                    let data = res.patients;

                    $.each(data, function(index, value) {
                        html +=
                            `<option value="${value.F_name}" data-phone="${value.phone}" >${value.F_name}</option >`;
                    });

                    list.html(html);

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