Expanding rows only when button clicked

Question

In my table i have button , when its clicked it should expanding rows and this how i navigated in my Javascripts, but my problem is when i clicked everywhere in table it will expandig rows , but i want rows expanded, when only button get clicked.

My question is how should i navigate in my JavaScript?!

JS:

$.ajax({
    type: "POST",
    url: "",
    data: ,
    success: function (result) {
        $("#DIV").html('');
        var rows = "";
  $.each(result, function (i, e) {

      rows += '<tr class="RMAJS">';
      rows += '<td id="varnummer" name="varnummer">' + e.varnummer + '</td>';
      rows += '<td id="Beskrivelse" name="Beskrivelse">' + e.Beskrivelse + '</td>';

      rows += '<td><button type="submit" class="sendRMA">Anmod om RMA</button></td>';

      rows += '</tr>';

      rows += '<tr style="display:none;" class="section">';
      rows += '<td>test</td>'
      rows += '</tr>';

 }); //End of foreach Loop

        $('#ResultProduct').append(rows);

    }
})

HTML:

   <table class="table">
      <thead>
         <tr>
          <th>Varenummer</th>
          <th>Beskrivelse</th>
          <th></th>
          </tr>
      </thead>
  <tbody id="ResultProduct">
    <tr class="RMAJS">
       <td id="varnummer" name="varnummer">61A6MAT3</td>
       <td id="Beskrivelse" name="Beskrivelse">Lenovo T24</td>
       <td><button type="submit" class="sendRMA">Anmod om RMA</button></td>
    </tr>
   <tr style="display:none;" class="section">
    <td>test</td>
   </tr>

 <tr class="RMAJS">
           <td id="varnummer" name="varnummer">AMAT3</td>
           <td id="Beskrivelse" name="Beskrivelse">Dell</td>
           <td><button type="submit" class="sendRMA">Anmod om RMA</button></td>
  </tr>  
  <tr style="display:none;" class="section">
        <td>test</td>
  </tr>
  </tbody>
    </table>

And here 3 Javascripts i'll come up with:

• The first one will expand rows not only when button clicked, but it will also expand rows when i clicked everywhere in table

   $('#ResultProduct').on("click", ".RMAJS", function () { $(this).next('.section').toggle("slow"); }); 

• The Second & Third not going to expanding rows when i clicked on button:

   $('.sendRMA').on("click", function () { $(this).next('.section').toggle("slow"); }); $('.RMAJS').on("click", ".sendRMA", function () { $(this).next('.section').toggle("slow"); }); 

Answer 1

You are missing the closest you should not use next as next will be the next element, but your section is next to tr not next to td, so you will have to first find the tr and then next section.

$('.sendRMA').on("click", function() {
  $(this).closest('tr').next('.section').toggle("slow");
});

 $('.sendRMA').on("click", function() { $(this).closest('tr').next('.section').toggle("slow"); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table"> <thead> <tr> <th>Varenummer</th> <th>Beskrivelse</th> <th></th> </tr> </thead> <tbody id="ResultProduct"> <tr class="RMAJS"> <td id="varnummer" name="varnummer">61A6MAT3</td> <td id="Beskrivelse" name="Beskrivelse">Lenovo T24</td> <td><button type="submit" class="sendRMA">Anmod om RMA</button></td> </tr> <tr style="display:none;" class="section"> <td>test</td> </tr> <tr class="RMAJS"> <td id="varnummer" name="varnummer">AMAT3</td> <td id="Beskrivelse" name="Beskrivelse">Dell</td> <td><button type="submit" class="sendRMA">Anmod om RMA</button></td> </tr> <tr style="display:none;" class="section"> <td>test</td> </tr> </tbody> </table>