JSFiddle - React, Tailwind, and code Playground

by jbalsas

HTML

<form action="">
    <table>
        <tr><td>
            <label for="name">Nombre</label>
            <input type="text" name="name" required maxlength="127" />
        </td></tr>
        <tr><td>
            <label for="icon">Iconos</label>
            <input id="icons_txt" type="text" name="icon" required pattern="f{1,3}"/>
            <ul id="icons_list" style="display:none"></ul>
        </td></tr>
        <tr><td>
            <button id="add_btn" type="button">Add Icon</button>
            <button id="remove_btn" type="button">Remove Icon</button>
        </td></tr>
        <tr><td>
            <input type="submit" />
        </td></tr>
    </table>
</form>

JavaScript

var icons = 0;

$('#add_btn').click(function() {
    icons++;

    $("#icons_txt").val('');
    $("#icons_list").html('');
    $("#icons_list").css('display', '');

    for (var i = 0; i < icons; i++) {
        $("#icons_txt").val($("#icons_txt").val() + 'f');
        $("#icons_list").append('<li>[] </li>');
    }
});

$('#remove_btn').click(function() {
    icons = Math.max(--icons, 0);

    $("#icons_txt").val('');
    $("#icons_list").html('');
    $("#icons_list").css('display', '');

    for (var i = 0; i < icons; i++) {
        $("#icons_txt").val($("#icons_txt").val() + 'f');
        $("#icons_list").append('<li>[] </li>');
    }
});