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>
					<tr>
                                        	<td></td>
                                        </tr>
				</tbody>
				</table>
			</div>
                        <a class="btn btn-secondary rounded-0 btn-block" id="insertRow" 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 () {
        // Start counting from the third row
        var counter = 1;
        $("#insertRow").on("click", function (event) {
            event.preventDefault();

            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 = `<th scrope="row">${counter}</th>
                   <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" id ="deleteRow"><i class="fa fa-trash"></i></button></td>`;

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

            // Insert the row inside a table
            $("table#atv").append(newRow);

            // Increase counter after each row insertion
            counter++;
            $("table tr select").selectpicker('refresh');
        });

        // Remove row when delete btn is clicked
        $("table#atv").on("click", "#deleteRow", function (event) {
            $(this).closest("tr").remove();
            counter -= 1
        });
    });