JSFiddle - React, Tailwind, and code Playground

JavaScript

$(document).ready(function () {
    $('<button/>').attr({ 'id': 'add' }).appendTo("body");
    $("#add").text("Add Field");
    $('<div/>').attr({ 'id': 'items' }).appendTo("body");
    $('<div/>').attr({ 'type': 'text', 'name': 'input[]' }).appendTo("#items");
    var count = 1;
    
    $("#add").click(function (e) {
        //Append a new row of code to the "#items" div
        
        count = count +1;
        var text1 = $('<div/>').attr({ 'id':'div' + count,'type': 'text', 'name': 'input[]' });
        var text2 = $('<input/>').attr({ 'id': 'i1', 'type': 'text', 'name': 'username', 'size': '25' });
        var text3 = $('<button/>').attr({ 'id': 'del' }).text("Delete");
        $("#items").append(text1);
        $("#div" + count).append(text2, text3);
        $('<br/>').insertAfter(text3);
    });
    
    //delete function
    $("body").on("click","#del",function (e) {
        $(this).parent("div").remove();
    });       
});