JSFiddle - React, Tailwind, and code Playground

by Super_baloo8

HTML

<body>
    <div id="container">
        <table>
            <tr>
                <td>De manière manuelle :</td>
            </tr>
            <tr>
                <td>
                    <table>
                        <form name="manuel" method="POST" action="">
                            <tr>
                                <td>email :</td>
                                <td>
                                    <div id="emaili">
                                        <input type="text" name="email" value="test@test.fr" />
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td> <span id="ajouter"> <input type="submit" value="ajouter" /> </span> 
                                </td>
                                <td> <span id="recuperer"> <input type="submit" value="recuperer emails" /> </span> 
                                </td>
                            </tr>
                        </form>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>

CSS

#cadre {
    position:absolute;
    border:2px solid #000;
    background:#FFF;
}
#hide {
    position:absolute;
    top:0;
    right:0;
    color:#000;
    text-decoration:none;
    font-size:20px;
}

JavaScript

$('#ajouter').click(function () {
    var email = $('input[name="email"]').val();
    $('#container').append('<div id="cadre">' + email + '<div><a href="#" id="hide">' + "x" + '</a></div> </div>');
    return false;
});