same popover shwoing every time

same popover shwoing every time

i have two popover need to open i.e two different (not and review ) but it showing same when i click on it
  1.  <div class="col-lg-1">
                    <i  class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol77" data-placement="left"><span class="close-popover float-right text-danger "></span></i>
    
                    <div class="popover_title" style="display: none">
                        <h6>No task result for note<span class="close-popover float-right text-danger"><i class="fa fa-times"></i></span></h6>
                    </div>
                    <div class="popper-content" style="display:none">
                        <div class="form-group">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Message
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
                </div>
    
                <div class="col-lg-1">
                    <i class="ShowToolTip popper fa fa-eye LabTaskClass28  LabTaskClassforShowHideCol78" data-placement="left"><span class="close-popover float-right text-danger "></span></i>
                    @*<div class="popper-content" style="display:none">My Review popover content goes here.</div>*@
                    <div class="popover_title" style="display: none">
                        <h6>No task result for Review<span class="close-popover float-right text-danger"><i class="fa fa-times"></i></span></h6>
                    </div>
                    <div   class="popper-content" style="display: none">
                        <div class="form-group">
                            <label title="Task name">
                                Task name
                            </label>
                            <input type="text"
                                   class="form-control">
    
                            <label title="Message">
                                Messagessd
                            </label>
                            <input type="text"
                                   class="form-control" placeholder="Limited to 100 Characters">
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:maroon !important">Close</button>
                            <button class="btn-save btn btn-primary btn-sm" style="background-color:darkslategrey !important">SAve</button>
                        </div>
                        <button type="submit" class="btn btn-default btn-block">
                            Submit
                        </button>
                    </div>
    
                </div>
  1. <script type="text/javascript">
          
            $(function () {
                $('.popper').popover({
            
                    placement: 'bottom',
                    container: 'body',
                    html: true,
                    title: function () {
                        return $('.popover_title').html();
                    },
                 
                  
                   
                    @*content: function () {
                        var output = '';
                        $.ajax(
                            {
                                url: "@Html.Action("Client", "Test")",
                                async: true,
                                success: function (response) {
                                    output = response;
                                }
                        });
                    }*@
                    
                   // content:  fetchData() {
                    content: function () {
                     //  return $('#popover_content_wrapper').html();
                        // return $(this).next('.popper-content').html();
                        return $('.popper-content').html();
                    }
                });
    
    
                $('html').on('click', function (e) {
                    if (typeof $(e.target).data('original-title') == 'undefined' && !$(e.target).parents().is('.popover.in')) {
                        $('[data-original-title]').popover('hide');
                    }
                });
                //});
                //$("[data-toggle=popover]").popover({
                //    html: true,
                //    content: function () {
                //        return $('#popover-content').html();
                //    }
                //});
    
            });
            $(document).on('click', '.close-popover', function () {
               // $('#cart-popover').popover('hide');
            });
        </script>