How to make the buttons work independetly

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?

4 answers

  • answered 2021-09-23 11:53 Shree

    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>

  • answered 2021-09-23 11:54 Carsten Løvbo Andersen

    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>

  • answered 2021-09-23 11:55 Lalalena

    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.

  • answered 2021-09-23 11:55 Vitaliy Rayets

    Take sibling element for each button

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

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum