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?
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>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>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.