JSFiddle - React, Tailwind, and code Playground

HTML

<html lang="en">
  <body>
    <main>
      <div id="test"></div> 
    </main>
	<script src="index.js"></script>
  </body>
</html>

JavaScript

const groupBox = document.getElementById("test");
groupBox.appendChild(newGroupMember("Leonard"));

function newGroupMember(name) {
    let inputGroup = document.createElement("div");

    let checkBoxContainer = document.createElement("div");

    let textInput = document.createElement("input");
    textInput.type = "text";
    textInput.value = name;
    textInput.setAttribute("readonly", "");
    textInput.setAttribute("disabled", "");

    inputGroup.style.position = "relative";
    inputGroup.style.zIndex = "4";
    textInput.style.zIndex = "0";
    textInput.style.position="relative";
    checkBoxContainer.style.zIndex = "3";

    let checkBox = document.createElement("input");
    checkBox.type = "checkbox";
    checkBox.value = "";
   

    inputGroup.addEventListener("click", function () {
        if (checkBox.checked) {
            checkBox.checked = false;
            textInput.setAttribute("disabled", "");
            
        } else {
            checkBox.checked = true;
            textInput.removeAttribute("disabled");
           
        }
        console.log(groupData);
    });

    
    checkBox.addEventListener("click", function () {
        if (checkBox.checked) {
            checkBox.checked = false;
        } else {
            checkBox.checked = true;
        }
    });
    

    checkBoxContainer.appendChild(checkBox);

    inputGroup.appendChild(textInput);
    inputGroup.appendChild(checkBoxContainer);
    return inputGroup;
}