JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Add/Remove Fields in Table with jQuery</title>
    <!-- Include Bootstrap CSS and jQuery (you need to download and link them) -->
    <link rel="stylesheet" href="path/to/bootstrap.css">
    <script src="path/to/jquery.js"></script>
</head>
<body>
    <form id="myForm">
        <table class="table">
            <thead>
                <tr>
                    <th>Time</th>
                    <th>Event</th>
                    <th>Speaker</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="fieldTable">
                <!-- Initial field group -->
                <tr>
                    <td><input type="text" class="form-control" name="time1" placeholder="Time"></td>
                    <td><input type="text" class="form-control" name="event1" placeholder="Event"></td>
                    <td><input type="text" class="form-control" name="speaker1" placeholder="Speaker"></td>
                    <td><button type="button" class="btn btn-danger remove">Remove</button></td>
                </tr>
            </tbody>
        </table>

        <button type="button" id="addField" class="btn btn-primary">Add Field Group</button>
    </form>

    <script>
        // Counter to keep track of the number of field groups added
        let fieldGroupCounter = 1;

        // Function to add a new field group
        function addNewFieldGroup() {
            fieldGroupCounter++;

            const newRow = $('<tr></tr>');
            newRow.append($('<td><input type="text" class="form-control" name="time' + fieldGroupCounter + '" placeholder="Time"></td>'));
            newRow.append($('<td><input type="text" class="form-control" name="event' + fieldGroupCounter + '" placeholder="Event"></td>'));
            newRow.append($('<td><input type="text" class="form-control" name="speaker' + fieldGroupCounter + '" placeholder="Speaker"></td>'));
            newRow.append($('<td><button...