JSFiddle - React, Tailwind, and code Playground

by Good Muyis

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Add/Remove Fields in Table</title>
    <!-- Include Bootstrap CSS (you need to download and link it) -->
    <link rel="stylesheet" href="path/to/bootstrap.css">
</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" onclick="removeField(this)">Remove</button></td>
                </tr>
            </tbody>
        </table>
        
        <button type="button" id="addField" class="btn btn-primary">Add Field Group</button>
    </form>

    <!-- Include Bootstrap JavaScript (you need to download and link it) -->
    <script src="path/to/bootstrap.js"></script>

    <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++;
            
            // Create a new field group row
            const newRow = document.createElement("tr");

            // Create time, event, and speaker fields for the new group
            const newTimeField = createInput("text", "time" + fieldGroupCounter, "Time");
            const newEventField = createInput("text", "event" + fieldGroupCounter, "Event");
            const newSpeakerField = createInput("text",...