how to hide multiple form and show one of form with event click jquery

Question

I'm using jquery to hide all when document ready and when I'm click one of the btn-primary then will be show and hide in accordance with for each of row.

jquery

<script>
$(document).ready(function() {
$('#table').DataTable();
$('#formmasuk').hide();
$('.btn-primary').click(function() {
$('#formmasuk').show();
$('#buttonmasuk').hide();
   });
});
</script?

html

<table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr style="center">
                    <th>Nik</th>
                    <th>Nama</th>
                    <th>Jabatan</th>
                    <th>Masuk</th>
                    <th>Keluar</th>
                  </tr>
                </thead>
                <tbody>
                  <?php  foreach($query as $row):?>
                <tr>
                    <td><?php echo $row->nik ?></td>
                    <td><?php echo $row->nama ?></td>
                    <td><?php echo $row->jabatan ?></td>
                    <td>
                      <div id='buttonmasuk'>
                          <a class="btn btn-sm btn-primary" href="javascript:void()"
  title="Masuk" onclick="masuk('<?php echo $row->id_kar;?>')">Masuk</a></div>
                      <div id='formmasuk'>
                          <form>
                          <input type="text" name="pass">
                          </form>
                      </div>
                          <td>
                          <a class="btn btn-sm btn-danger"  title="Keluar" ></i>
      Keluar</a></td>
                   </tr>
                    <?php 
                    endforeach ;?>
                </tbody>
              </table>

this image when document ready. why not all hidden? when I click one of the button masuk (class btn-primary) then show I want when clik click one of the button masuk (class btn-primary)then show and other still hidden

Answer 1

Change your ids to class .

It should be like the following

<div class='buttonmasuk'>
...
<div class='formmasuk'>

and the script be like the following

$('.formmasuk').hide();
$('.btn-primary').click(function() {
  $(this).closest('.formmasuk').show();
  $(this).closest('.buttonmasuk').hide();
});

Answer 2

Your html id-s should be unique for the page. Try to add unique id-s to the forms because now you are assingning them the same value "formmasuk"

Answer 3

you need to first add Jquery library to your dom add this link in your index.html

         ["http://code.jquery.com/jquery-2.2.4.min.js"
          integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
          crossorigin="anonymous"]

and remove the second line of the code datatable from your script then code is working fine and also please end your script tag properly.