JSFiddle - React, Tailwind, and code Playground

HTML

<!-- Instructions Use any combination of web technology to complete the task Submit a format that is easy for us to run / inspect from the browser 

Stage 1: "Make circles "When the user clicks on the page, a circle appears under the mouse cursor (and persists statically in that position)." Stage 2: "Make lettered circles" 1. Add some sort of typeable area to the page 

2. Now each time the user clicks, delete the first letter from the typeable area, and display it within the newly created circle -->

<input type="text" id="jibberjabber" />
<div id="area"></div>

CSS

.circle {
    position: absolute;
    width:150px;
    height:150px;
    border:1px solid black;
    border-radius:150px 150px 150px 150px;
    
}

#area {
    width:800px;
    height:500px;
}

JavaScript

var i = 0;
$('#area').bind('click', function (e) {
    
        // input stuff
        $('#jibberjabber').val(
    function (index, value) {
        var jimmy = value.substring(1);
        return jimmy;
    });
    
    // push letter to variable ready for circle
    var jibberjabbercontent = $('#jibberjabber').text();
    var firstletter = jibberjabbercontent.charAt(0);
    
    // making of the circles
    $('<div/>').attr({
        'id': i
    }).addClass('circle').css({
        'top': e.pageY - 75,
            'left': e.pageX - 75,
                'content': firstletter
    }).appendTo('#area');
    i++;
    
});