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) {
    
        if ( $('#' + id).length > 0 ) {
            
            $('#' + id).remove();  
        } else {
            
            $('#myForm').append('<input type="text" name="' + name + '" value="' + value + '" id="' + id + '" />');   
        }
        
    }
    
</script>