title: using jquery each method with ajax
body: <p>I'm trying to display a list of players with a edit button next to each one. When edit is pressed, then the user can edit that player. I'm trying to do this using ajax. The problem: The table will display for a split second then it's a blank screen.</p>
  
  <pre><code>&lt;?php foreach($players as $player): ?&gt;   
      &lt;tr&gt;
          &lt;td&gt;&lt;?= $player['first_name']; ?&gt;&lt;/td&gt;
          &lt;td&gt;&lt;?= $player['last_name']; ?&gt;&lt;/td&gt;
           &lt;td&gt;&lt;?= $player['email']; ?&gt;&lt;/td&gt;
           &lt;td align="center" &gt;
              &lt;form action="" method="post" id="edit_player"&gt;
        &lt;input type="hidden" name="user_id" value="&lt;?= player['user_id']; ?&gt;"&gt;
                  &lt;input type="submit" value='Edit' name='submit'&gt;
              &lt;/form&gt;
           &lt;/td&gt;             
       &lt;/tr&gt; 
  &lt;?php endforeach;?&gt;   
  </code></pre>
  
  <p>Here is my jquery/ajax code. I made some changes from earlier. I think it's better, but it's still not working.</p>
  
  <pre><code>$(document).ready(function() {      
  var contents = $('#teamMain');
  $('.edit_player').each(function(index, value) {
  
       var formData = $(this).attr('user_id');
  
      $.ajax({
          url: 'views/team_nav.php',
        type: 'POST',
        cache: false,
        data: formData, 
        success: function(data){
           contents.html(data);                     
        }
     });                          
  });
  });  
  </code></pre>