Как предотвратить слияние элементов данных таблицы в один столбец?

Question

Я загружаю данные API в table, используя Flask, и как только элементы помещаются в свои ячейки, у меня есть jQuery для добавления класса bootstrap к элементам td. Когда я добавляю bootstrap классы "btn" и "btn-secondary", два элемента td прикрепляются бок о бок, где я хочу, чтобы они находились в своих соответствующих столбцах.

<table>
  <tbody id="myTable">
    {% for row in values %}
    <tr class="item">
      <td class="link"><a href="#">Link</a></td>
      {% for element in row['values'] %}
      <td>{{ element }}</td>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

Циклы for являются шаблонами jinja для подставляем значения в таблицу

$(".item td:nth-child(7)").addClass("requestedStatus btn btn-secondary");
$(".item td:nth-child(7)").on('click', function() {
  $(this).text($(this).text() == 'IN' ? 'OUT' : 'IN');
})

// Add button feature and Toggle text between True and False for usageFlag column 
$(".item td:nth-child(8)").addClass("usageFlag btn");
$(".item td:nth-child(8)").on('click', function() {
  $(this).text($(this).text() == 'True' ? 'False' : 'True');
})

Снимок экрана

Пожалуйста, помогите мне в этом.