How to get ID from Popover which opens when we click on table row.

This table pulls records from database. I want to add an update functionality. So I decided add an bootstrap popover to make row editable. So when user click address, popover appear with an fields allowing user to update address.

Clicking Edit would update the address.

Problem I don't know how to grab the address and ID of that clicked row So I can feed the information to sql update statement.

Here is code for edit button

    $(document).on("click", ".sucess", function() {
           var address = $("#address").attr('value');
          alert(address);

    });

So when I click edit itn alert the value of 1st row only.

Here is my all code.

<?php
    $con = mysqli_connect("localhost","root","","test");

 // Check connection
  if (mysqli_connect_errno())
      {
     echo "Failed to connect to MySQL: " . mysqli_connect_error();
         }else {
        echo "";
   }
     ?>

       <!--QUERY-->
      <?php
     $prepare_query = "SELECT * FROM customers";

         $result = mysqli_query($con, $prepare_query);

       ?>
        <table id="stock-table" class="display">
       <thead>
       <tr>
       <th>Customer Name</th>
       <th>Address</th>
       </tr>
      </thead>
      <tbody>
      <?php


      while($row = mysqli_fetch_array($result)) {    
      ?>
      <div id="userlog" class="operator">
       <tr>
       <td><?php echo $row['CustomerName']?></td>
       <td>  
        <a href="#" class="btn-row-popup-menu row"><?php echo 
       $row['CustomerAddress1']?>
      <div style="display:none;">
        <div class="btn-row-popup-menu-body">
          <input type="text" class = "name"   id="address"value = "<?php echo $row['CustomerAddress1']?>" >
           <button class="btn-success sucess"> EDIT</button>
           <button class="transaction-menu-legend delete" id="delete"> DELETE</button>
        </div>
      </div>
   </a>
  </td>
</tr>
</div> 


<?php
}
?>
 </tbody>
</table>
<script>
       $(document).ready(function() {
   $('#stock-table').DataTable();
  } );

   //wHEN CLICK ON THE EDIT BUTTON INSIDE THE POPOVER

    $(document).on("click", ".sucess", function() {
             var address = $("#address").attr('value');
            alert(address);

       });

  </script>



    <!-- POPOVER -->
  <script>
 // Popover Menu initialize
   $('.btn-row-popup-menu').popover({
   placement: 'right',
     trigger: 'click',
    html: true,
    title: function() {
    return $(this).parent().find('.btn-row-popup-menu-head').html();
    },
 content: function() {
   return $(this).parent().find('.btn-row-popup-menu-body').html();
 }

   }).on('show.bs.popover', function(e) {
    if (window.activePopover) {
   $(window.activePopover).popover('hide')
   }
    window.activePopover = this;
    currentPopover = e.target;

  }).on('hide.bs.popover', function() {
 window.activePopover = null;
  });
  // Close popover when clicking anywhere on the screen
  $(document).on('click', function(e) {
   $('[data-toggle="popover"],[data-original-title]').each(function() {
     //the 'is' for buttons that trigger popups
    //the 'has' for icons within a button that triggers a popup
    var target = $(e.target);
    if (!target.is('.popover') && !target.is('.popover *') && 
     !target.is('.btn-row-popup-menu') || target.is('.btn-popover-close')) {
     (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click 
   = false;
   }
 });
 });
   // Anchor popover to opening element
    $(window).resize(function() {

     console.log(currentPopover);

     if (currentPopover.data('bs.popover').tip().hasClass('in') == true) {
    currentPopover.popover('hide');
     currentPopover.popover('show');
   }
  });
 </script>

Solution

You can create simple forms for each customer in which you give customer Id as hidden field. And where you are alerting address, you can access address and ID and then use ajax for sql update. Form example -

        <div id="userlog" class="operator">
           <tr>
           <td><?php echo $row['CustomerName']?></td>
           <td>  
            <a href="#" class="btn-row-popup-menu row"><?php echo 
           $row['CustomerAddress1']?>
            <div style="display:none;">
            <div class="btn-row-popup-menu-body">
                <form method="POST">
               <input type="hidden" name="customerId" value="<?php echo $row['CustomerID']?>" >
               <input type="text" class = "name"   id="address" value = "<?php echo $row['CustomerAddress1']?>" >
               <button class="btn-success sucess"> EDIT</button>
               <button class="transaction-menu-legend delete" id="delete"> DELETE</button>
               </form>
            </div>
       </a>
      </td>
    </tr>
    </div>

And Script:

        $(document).on("click", ".sucess", function() {
        var address = $(this).parent().find('input[name="address"]').val();
        var custId =  $(this).parent().find('input[name="customerId"]').val();
        alert(address);
        alert(custId);

        // send these via ajax
   });