JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm">
    <input onclick="addRemoveHiddenInput('testId', 'testName', 'testValue')" type="checkbox" id="mc" name="paymentMethod" value="Mastercard"><label for="mc">Mastercard</label>
</form>
    
<script>
    
    function addRemoveHiddenInput(id, name, value) {
    
        var hiddenInput = document.getElementById(id);
    
        if ( hiddenInput != null ) {
            
            hiddenInput.parentNode.removeChild(hiddenInput);
        } else {
             
            document.getElementById('myForm').innerHTML = document.getElementById('myForm').innerHTML + '<input type="text" name="' + name + '" value="' + value + '" id="' + id + '" />';
        }
        
    }
    
</script>