foreach value passing duplication in web share api javascript function

Question

I am trying to share the link of a specific product. In foreach loop, I am calling the products of users so they can share it by pressing share. The API is working.

But, every button pass the first id there is duplication and i don't have any solution for it... trying different things since 2 days but all in vein... please guide me to the solution thank you....

heres the button code

@foreach($sellers as $reports)
    <input id="myInput"  type="button" data-name="{{$reports['title']}}" data-id="{{$reports['id']}}" value="{{$reports['id']}}" onclick="addRow(this)">
@endforeach

heres the js function

    @push('myjs')
    <script>
        function addRow(ele)
        {
            var name= $(ele).attr('data-name');
            var id= $(ele).attr('data-id');

            var text = "http://127.0.0.1:8000/scan-s-report/"+ id +"/landing-page";
            var subject = "Report link for"+ name ;

            console.log(subject);
            $(document).on('click', () => {
                if (navigator.share !== undefined) {
                    navigator.share({
                        // console.log('I m if');
                        text: text,
                        // title: 'Web Share API Draft',
                        // url: 'https://wicg.github.io/web-share/#share-method',
                    })
                        .then(() => console.log('Successful share'))
                        .catch((error) => console.log('Error sharing', error));
                }
                // else {
                //     // console.log('I m else');
                //      window.location = 'mailto:?subject=Report link for + name +&body=http://127.0.0.1:8000/scan-sm-report/+ id +/landing-page';
                // }
            });

        }
    </script>
@endpush

@Anurad

Answer 1

if you use onclick="addRow()" then I think you don't need $().on('click', ...). They are doing the same thing. I think you can move out the code inside () => {...} good luck @Anurad this works for me now it is working like a charm :D

@push('myjs')
    <script>
        function addRow(ele)
        {
            var name= $(ele).attr('data-name');
            var id= $(ele).attr('data-id');

            var text = "http://127.0.0.1:8000/scan-s-report/"+ id +"/landing-page";
            var subject = "Report link for"+ name ;

            console.log(subject);

        // $('input[type=button]').on('click', () => {
                if (navigator.share !== undefined) {
                    navigator.share({
                        // console.log('I m if');
                        text: text,
                        // title: 'Web Share API Draft',
                        // url: 'https://wicg.github.io/web-share/#share-method',
                    })
                        .then(() => console.log('Successful share'))
                        .catch((error) => console.log('Error sharing', error));
                }
                // else {
                //     // console.log('I m else');
                //      window.location = 'mailto:?subject=Report link for + name +&body=http://127.0.0.1:8000/scan-sm-report/+ id +/landing-page';
                // }
            // });

        }
    </script>
@endpush