JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="form-group">
  <div class="col-md-12 mx-auto">
    <div class="card rounded-0 border-0 shadow">
      <div class="card-body p-8">
        <div class="table-responsive">
          <table id="atv" class="table">
            <thead>
              <tr>
                <th scope="col">ítem</th>
                <th scope="col">atividade</th>
                <th scope="col">série</th>
                <th scope="col">repetições</th>
                <th scope="col">observações</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <a class="btn btn-secondary rounded-0 btn-block" onclick="addRow('atv')" href="#"
          >click para adicionar atividades, série, repetição e observação</a
        >
      </div>
    </div>
  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

function addRow(table_id) {
    table = $("table#"+table_id);
    var newRow = $("<tr>");

    // Table columns
    let list =
      `@Html.DropDownListFor(p => p.atividades, null, new { @id = "multiplo", @class = "form-control rounded-0", @Multiple = "multiple", @name = "firstname", @placeholder = "First name" })`;
    let cols = `<td class="counter"><b></b></td>
                     <td>${list}</td>
                     <td><input class="form-control rounded-0" type="text" name="lastname" placeholder="Last name"></td>
                     <td><input class="form-control rounded-0" type="text" name="handle" placeholder="Handle"></td>
                     <td><input class="form-control rounded-0" type="text" name="text" placeholder="texto"></td></td>
                     <td><button class="btn btn-danger rounded-0" onclick="removeRow(event,'${table_id}')"><i class="fa fa-trash"></i></button></td>`;

    // Insert the columns inside a row
    newRow.append(cols);

    // Insert the row inside a table
      $(table).find("tbody").append(newRow);

    //Reorder counter
    let counter = 1;
    $(table).find("tbody tr td.counter").each(function(){
        $(this).text(counter);
        counter++;
    });

    return false;
  }

  function removeRow(event, table) {
    table = $("table#"+table);
    $(event.target).closest("tr").remove();

    let counter = 1;
    $(table).find("tbody tr td.counter").each(function(){
        $(this).text(counter);
        counter++;
    });
  }