So I have this table and I have added some buttons inside the table cells

<table border="1">

        <tr>
        <th><button id="0" class="mybtn" >1</button><div class="myDiv"></div></th>
        <th><button id="1" class="mybtn">2</button><div class="myDiv"></div></th>
        <th><button id="2" class="mybtn" >3</button><div class="myDiv"></div></th>
    </tr>
    </table>

When I click on the buttons I want them to add a text field. But when I click on it all three buttons work at the same time.

Here is my jQuery code

$(document).ready(function() {

    $(".mybtn").on("click",function() {

        $(".myDiv").append("<div><br><input type='text' /><br></div>");
    });


});

how to make the buttons work independetly?

CodePudding user response：

Use parent('th').find('.myDiv').

$(".mybtn").on("click", function() {
  $(this).parent('th').find('.myDiv').append("<div><br><input type='text' /><br></div>");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">

  <tr>
    <th><button id="0" class="mybtn">1</button>
      <div class="myDiv"></div>
    </th>
    <th><button id="1" class="mybtn">2</button>
      <div class="myDiv"></div>
    </th>
    <th><button id="2" class="mybtn">3</button>
      <div class="myDiv"></div>
    </th>
  </tr>
</table>

CodePudding user response：

All you have to do is use $(this).next(".myDiv")

$(document).ready(function() {
  $(".mybtn").on("click", function() {
    $(this).next(".myDiv").append("<div><br><input type='text' /><br></div>");
  });
});

Demo

$(document).ready(function() {
  $(".mybtn").on("click", function() {
    $(this).next(".myDiv").append("<div><br><input type='text' /><br></div>");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">

  <tr>
    <th><button id="0" class="mybtn">1</button>
      <div class="myDiv"></div>
    </th>
    <th><button id="1" class="mybtn">2</button>
      <div class="myDiv"></div>
    </th>
    <th><button id="2" class="mybtn">3</button>
      <div class="myDiv"></div>
    </th>
  </tr>
</table>

CodePudding user response：

Well, you have 3 divs that all have the class "myDiv", so the code gets executed on all three of them if you click any button:

$(".myDiv").append("<div><br><input type='text' /><br></div>");

Either work with IDs or select the parent container and use jQuery $(this) and find() to search for the div with class "myDiv" ONLY in the parent container.

CodePudding user response：

Take sibling element for each button

$(".mybtn").on("click", function () {
    $(this).siblings().append("<div><br><input type='text' /><br></div>")
});