JSFiddle - React, Tailwind, and code Playground

HTML

<p><strong>Paragraph		:</strong>

</p>
<label for="user-input">Paste your text below</label>
<br>
<textarea id="user-input" name="user-input"></textarea>
<p><strong>Letter:</strong>

</p>
<label for="user-input">Type your letter below</label>
<br>
<input type="text" id="letter-input" name="letter-input"></input>
<br>
<button id="go">Calculate!</button>
<span id="result"></span>

JavaScript

var input = ''; //User input
var input_letter = ''; //User input letter
var total_letters = 0; //Total number of letter instances

var body = document.querySelector("body");
var input_object = document.querySelector("#user-input"); //Text area with the user text
var letter_input_object = document.querySelector("#letter-input"); //Text field with the user letter
var start_calculation = document.querySelector("#go"); //Button starting the procedures
var output = document.querySelector("#result");

function count_letters() {
    var counter = 0;

    for (var i = 0; i < input.length; i++) {
        var index_of_sub = input.indexOf(input_letter, i);

        if (index_of_sub > -1) {
            counter++;
            i = index_of_sub;
            console.log(i);
        }
    }
    return counter;
}

function get_data() {
    input = input_object.value;
    input_letter = letter_input_object.value;
}

//Set the output after calculations have been completed
function set_data() {
    output.innerHTML = total_letters;
}

//Carry out the whole process
function start() {
    //Get the user input
    get_data();

    // Count all letters 
    total_letters = count_letters();


    //Set the output
    set_data();

    //END
}

//Start the calculations
start_calculation.addEventListener('click', start);