Строка таблицы расширяется вместе с кнопкой строки не работает

Question

Я использовал таблицу внутри таблицы с расширением строки. каждая родительская строка содержит кнопку, но теперь она не работает, а действует как расширение строки. Я попытался назначить каждому `` td '' один и тот же класс, кроме кнопки. и переключил его с помощью javascript, но это не сработало.

вот мой код -

<table class="table-expand">
  <thead>
      <tr>
        <th></th>
        <th width="120">name</th>

        <th colspan="3" width="60" class="text-center">Action</th>
      </tr>
  </thead>
  <tbody>
      <% @financials.each do |financial| %>
        <tr class="table-expand-row" data-open-details>
          <td><span class="expand-icon"></span></td>
          <td><%= financial.name %></td>

          <td><span data-tooltip aria-haspopup="true" class="has-tip" title="Add Financial Milestone"><%= link_to " ",new_project_financial_payment_milestone_url(@project, financial) , :class=>"button success small fi-plus button-radius button-margin-top button-margin-top" %></span></td>
          <td><%= link_to 'Edit', edit_project_financial_path(@project, financial), :class=>"button secondary small button-margin-top" %></td>
          <td><%= link_to 'Delete', project_financial_path(@project, financial), method: :delete, data: { confirm: 'Are you sure?' }, :class=>"button secondary small button-margin-top" %></td>
      </tr>



    <tr class="table-expand-row-content">
      <td colspan="20" class="table-expand-row-nested">
        <table>
          <thead>
            <tr>
    // table header
            </tr>
          </thead>

          <tbody>
// table code
              </tr>
            <% end %>
          </tbody>
          </table>

      </td>
    </tr>

<% end %>

  </tbody>
</table>

js - вот jquery код для переключения строки

      $('[data-open-details]').click(function (e) {
      e.preventDefault();
      $(this).next().toggleClass('is-active');
      $(this).toggleClass('is-active');
    });

css - Вот Css код стиля

.table-expand {
  margin-top: 5rem;
}

.table-expand td {
  color: #8a8a8a;
}

.table-expand tr {
  border: 1px solid #e6e6e6;
}

.table-expand .text-right {
  padding-right: 3rem;
}

.table-expand-row.is-active .expand-icon::after {
  content: '-';
}

.table-expand-row .expand-icon::after {
  content: '+';
  float: right;
}

.table-expand-row-content {
  display: none;
}

.table-expand-row-content.is-active {
  display: table-row;
}

.table-expand-row-nested {
  background-color: #e6e6e6;
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

как я могу сохранить кнопку строки, работающую с функцией расширения строки ??