JSFiddle - React, Tailwind, and code Playground

HTML

<form name="myform">
    <input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges <span></span></font>

    <br>
    <input type="checkbox" name="fruit[]" value="Apples" onClick="addToList(this, 'txt1')"><font color="#808080">Apples <span></span></font>

    <br>
    <input type="checkbox" name="fruit[]" value="Grapes" onClick="addToList(this, 'txt1')"><font color="#808080">Grapes <span></span></font>

    <br>
    <textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080" readonly></textarea>
</form>

JavaScript

var listCheckedOptions = [];

function addToList(checkObj, outputObjID) {
    //Remove do array caso o elemento já esteja inserido
    if (listCheckedOptions.indexOf(checkObj) >= 0) {
        listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj), 1);
    } else {
        if (listCheckedOptions.length >= 2) {
            alert("Máx 2 Elemenos selecionados");
            return checkObj.checked = false;
        }
        listCheckedOptions.push(checkObj);
    }

    document.getElementById(outputObjID).value = ""; //Limpa o textarea
    document.getElementById(outputObjID).value = listCheckedOptions.map(function (o) {
        return o.value;
    }).join('\r\n'); //Adiciona no textarea
    if (!checkObj.checked) checkObj.nextSibling.querySelector('span').innerHTML = '';
    listCheckedOptions.forEach(function (el, i) {
        var span = el.nextSibling.querySelector('span').innerHTML = i + 1;
    });

    return;
}