JSFiddle - React, Tailwind, and code Playground

HTML

<table>
  <tr>
    <td class="match_create_roster_playing"></td>
  </tr>
  <tr>
    <td class="match_create_roster_playing"></td>
  </tr>
  <tr>
    <td class="match_create_roster_playing"></td>
  </tr>
  <tr>
    <td class="match_create_roster_playing"></td>
  </tr>
</table>

JavaScript

var roster = [
  {
    user_id: 1
  }, {
    user_id: 2
  }, {
    user_id: 3
  }, {
    user_id: 4
  }
];
for (var i = 0; i < Object.keys(roster).length; i++) {
  // Shows 4 different ID's
  alert(roster[i].user_id);
  // Outputs the same ID 4 times
  $('.match_create_roster_playing').eq(i).html("<input type='checkbox' value='" + roster[i].user_id + "'>");

}