Разборная / расширяемая текстовая область в таблице, основанная на условии

Question

Я пытаюсь создать таблицу, в которой у пользователя будет кнопка или складной элемент; при изменении поля ввода следует открывать текстовую область под этой конкретной строкой таблицы, а не в столбце таблицы, которую пользователь может вставить вкомментарии.Проверьте вложение ниже.Я попробовал с кодом ниже.Но это не дало ожидаемого результата.Может ли кто-нибудь помочь мне понять, как я могу добиться этого и сделать его удобным для пользователя.

.collapsible:after {
  content: '\02795';
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr class="row" style="background-color: #41B6E6; color: white;">
        <th class="col-xs-1" style="text-align:center;">Store</th>
        <th class="col-xs-1" style="text-align:center;">Projected Revenue $</th>
        <th class="col-xs-1" style="text-align:center;">Proposed Goal $
        </th>
        <th class="col-xs-1" style="text-align:center;">Adjustment to $</th>
        <th class="col-xs-1" style="text-align:center;">Written Goal $</th>
        <th class="col-xs-1" style="text-align:center;">Proposed Written Goal %</th>
        <th class="col-xs-1" style="text-align:center;"> Written Goal %</th>
        <th class="col-xs-1" style="text-align:center;">Variance %</th>
        <th class="col-xs-1" style="text-align:center;">Comments</th>
    </thead>
    <tbody>
      <tr class="row" ng-repeat="record in c.data.store | orderBy:'u_stores'" ng-init="updateNewVariance(record); updateTotal(); getAdjustmentProfit(record); ">

        <td style="text-align: center;" class="col-xs-2">{{record.a}}</td>
        <td style="text-align: center;" class="col-xs-2">{{record.b}}</td>
        <td style="text-align: center;" class="col-xs-2">{{record.c}}</td>
        <td style="text-align: center; background-color: #FFD5A9;" class="col-xs-2"><input style="text-align: center;" type="number" placeholder={ {record.d}} ng-model="record.d" ng-change="updateNewVariance(record); updateTotal(); getAdjustmentProfit(record); " ng-readonly="disableInput()"></td>
        <td style="text-align: center;" class="col-xs-2" ng-model="record.gap_written_goal">{{record.e}}</td>
        <td style="text-align: center;" class="col-xs-1" ng-model="record.f">{{record.f}}</td>
        <td style="text-align: center;" class="col-xs-1" ng-model="record.gap_written_percent_goal">{{record.g}}</td>
        <td style="text-align: center;" class="col-xs-1" ng-model="record.h">{{record.h}}</td>
        <!--- <td style ="text-align: center;" class="col-xs-1" ><textarea rows= "2" column = "100" ng-hide = "record.adjustment == 0 || record.adjustment == null"  placeholder = {{record.comments}} ng-model="record.comment" 	 ng-readonly = "getAdjustmentProfit(record);" ng-required = "getAdjustmentProfit2(record); " ></textarea> {{record.comments}}  </td> -->
        <td> <button class="collapsible"></button>
          <textarea class="content"> </textarea> </td>
      </tr>
    </tbody>

  </table>
</div>

---

.collapsible:after { 
     content: '\02795'; /* Unicode character for "plus" sign (+) / 
     font-size: 13px;
     color: white; 
     float: right;
     margin-left: 5px;
}
.active:after { 
     content: "\2796"; / Unicode character for "minus" sign (-) */ 
}
.content { 
     padding: 0 18px;
     background-color: white;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.2s ease-out;
}