Q:

How to open a UL as per table row button position in jQuery?

I have a table right now there are three rows with Add Section button (it may be increase). When i click on Add Section a UL is toggle, its working fine just for first row Add Section, when i click on second button then UL open with top button. how can i fix it?
In simple way, i want open UL as per button position. how can i do this with single UL list?
My Code:-

$(function(){
            $('.add-section').click(function(){
                $('.section-area').toggle();
            });
        })
.section-area{ background:#fff; padding: 5px; border-radius: 4px; box-shadow: 2px 4px 10px rgba(39, 59, 69, 0.4); width: 100px; position: absolute; top:61px; right:140px; display: none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


  <table class="table table-bordered">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
            <td><button class="add-section btn btn-primary">Add Section</button></td>
        </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
            <td><button class="add-section btn btn-primary">Add Section</button></td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
            <td><button class="add-section btn btn-primary">Add Section</button></td>
          </tr>
        </tbody>
      </table>

      <div class="section-area">
          <ul>
              <li>Add 1</li>
              <li>Add 2</li>
              <li>Add 3</li>
          </ul>
      </div>

Answer will be appreciated!

A:

Your problem occurs because the top and right of your section-area are fixed. To fix that, simply change it so that the top and right change in accordance to which button is clicked. Here is a working example:

$(function(){
    $('.add-section').click(function(){
        let buttonTopPosition = $(this).offset().top
        let buttonLeftPosition = $(this).offset().left
        let sectionAreaWidth = $(this).outerWidth()
        $('.section-area').toggle();
        $('.section-area').css({top: buttonTopPosition, left: buttonLeftPosition - sectionAreaWidth})
    });
})
.section-area{
  background:#fff;
  padding: 5px;
  border-radius: 4px;
  box-shadow: 2px 4px 10px rgba(39, 59, 69, 0.4);
  width: 100px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<table class="table table-bordered">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
      <td><button class="add-section btn btn-primary">Add Section</button></td>
  </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
      <td><button class="add-section btn btn-primary">Add Section</button></td>
    </tr>
    <tr>
      <td>July</td>
      <td>Dooley</td>
      <td>july@example.com</td>
      <td><button class="add-section btn btn-primary">Add Section</button></td>
    </tr>
  </tbody>
</table>

<div class="section-area">
    <ul>
        <li>Add 1</li>
        <li>Add 2</li>
        <li>Add 3</li>
    </ul>
</div>

I changed your CSS top and left to be initially 0. Then, I will update those properties when a button is clicked (updated using jQuery).

