hide button based on condition with jquery

I have a page with a table containing customer data like customer name, quantity, price, and status. The Table looks like this:

<table>
    <tr>
        <th>No</th>
        <th>Customer</th>
        <th>Quantity</th>
        <th>Price</th>
        <th>Status</th>
        <th>Action</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Customer 1</td>
        <td>5000</td>
        <td>100000</td>
        <td class="status-order">Order</td>
        <td>
        <a class="btn btn-outline-primary">Update</a>
        <a class="btn btn-outline-danger">Delete</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>Customer 2</td>
        <td>2000</td>
        <td>40000</td>
        <td class="status-order">Order</td>
        <td>
        <a class="btn btn-outline-primary">Update</a>
        <a class="btn btn-outline-danger">Delete</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>Customer 3</td>
        <td>3000</td>
        <td>60000</td>
        <td class="status-order">Delivered</td>
        <td>
        <a class="update btn btn-outline-primary">Update</a>
        <a class="delete btn btn-outline-danger">Delete</a>
        </td>
    </tr>
</table>

I want to hide the Update button based on condition. Let’s say the status is "Delivered", then the Update button does not appear. So I create a jQuery file like this:

$(".status-order").each(function() {
    const status = $(this).text()

    if (status == "Delivered"){
        $(".update").hide()
        console.log(true)
    } else {
        $(".update").show()
        console.log(false)
    }
})

After I try to refresh the page to see the result, the update button in each rows are hide. I know my jQuery that i create it’s wrong, can you give me correct answer how to fix this? Thank you.

>Solution :

$(".update").hide() or $(".update").show() will both iterate through all elements matching .update and hide or show them. You only want to hide or show the .update that’s in the current table row.

The .status-order you’re iterating over is in a prior <td>, so use .next() to get to the next <td>, and then use .find('.update') on that to get to the descendant.

$(".status-order").each(function() {
  const status = $(this).text();
  const update = $(this).next().find('.update');
  if (status == "Delivered") {
    update.hide()
  } else {
    update.show()
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>No</th>
    <th>Customer</th>
    <th>Quantity</th>
    <th>Price</th>
    <th>Status</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Customer 1</td>
    <td>5000</td>
    <td>100000</td>
    <td class="status-order">Order</td>
    <td>
      <a class="btn btn-outline-primary">Update</a>
      <a class="btn btn-outline-danger">Delete</a>
    </td>
  </tr>
  <tr>
    <td>2</td>
    <td>Customer 2</td>
    <td>2000</td>
    <td>40000</td>
    <td class="status-order">Order</td>
    <td>
      <a class="btn btn-outline-primary">Update</a>
      <a class="btn btn-outline-danger">Delete</a>
    </td>
  </tr>
  <tr>
    <td>3</td>
    <td>Customer 3</td>
    <td>3000</td>
    <td>60000</td>
    <td class="status-order">Delivered</td>
    <td>
      <a class="update btn btn-outline-primary">Update</a>
      <a class="delete btn btn-outline-danger">Delete</a>
    </td>
  </tr>
</table>