title: Producing dynamic id for a button in javascript
body: <p>I am trying to write a feature where a table data is generated from a database along with buttons like editing that particular row. The data is generated through a foreach from laravel. One of these buttons is called <code>Edit User</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/8MqvF.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8MqvF.jpg" alt="List User Screenshot"></a></p>
  
  <p>When the <code>Edit User</code> is clicked a form div will be <code>.toggle('show')</code> which will show the form.</p>
  
  <p><a href="https://i.stack.imgur.com/eoMgZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eoMgZ.jpg" alt="Edit User Screenshot"></a></p>
  
  <p>Now I think the problem is the buttons have the same id for the toggle so when I press the second, third and so on buttons the form doesn't toggle.
  Here is my <code>script.js</code></p>
  
  <pre><code>$(document).ready( function() {
    $("#form1").hide();
    $("#form2").hide();
    $("#createuser1").click(function() {
      console.log('Create user button clicked');
      $("#form2").hide();
      $("#form1").toggle('slow');
    });
    $("#edituser1").click(function() {
      console.log('Edit user button clicked');
      $("#form1").hide();
      $("#form2").toggle('slow');
    }); 
  });
  
  //start of checkuser
  function fetchUser(field, query) {
    console.log('The field is ' + field + ' and the userid is ' + query);
  }
  </code></pre>
  
  <p>my html file (main.blade.php)</p>
  
  <pre><code>&lt;tbody&gt;
    @foreach($users as $user)
      &lt;tr&gt;
        &lt;td&gt;{{$user-&gt;userid}}&lt;/td&gt;
        &lt;td&gt;{{$user-&gt;firstname}}&lt;/td&gt;
        &lt;td&gt;{{$user-&gt;lastname}}&lt;/td&gt;
        &lt;td&gt;{{$user-&gt;username}}&lt;/td&gt;
        &lt;td&gt;{{$user-&gt;password}}&lt;/td&gt;
        &lt;td&gt;
          @if($user-&gt;status == 0)
            Inactive
          @elseif($user-&gt;status == 1)
            Active
          @endif
        &lt;/td&gt;
        &lt;td&gt;
          &lt;input class="btn btn-danger btn-inverse" type="button" value="Inactive" /&gt;
          &lt;input name="edituser" type="button" onclick="fetchUser('edituser', {{$user-&gt;userid}})" id="edituser1" class="btn btn-success btn-inverse" value="Edit User"/&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    @endforeach
  &lt;/tbody&gt;
  </code></pre>
  
  <p>This is the part where it toggles the forms (also part of main.blade.php)</p>
  
  <pre><code>&lt;div class="container" id="form1"&gt;
    @include('create')
  &lt;/div&gt;
  
  &lt;div class="container" id="form2"&gt;
    @include('edit')
  &lt;/div&gt;
  </code></pre>
  
  <p>I have only included parts of the code to avoid chunks of unrelated code. But feel free to ask for any more details.</p>
  
  <p>Help me solve the part where the other edit buttons doesn't toggle the edit user form.</p>