JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group" data-toggle="buttons" id="addSecLvlButtons" >
		<label id="addSecLvl1Label" class="btn btn-default btn-gradient btn-sm">
		  <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption1" value="1">Security Lvl 1</label>
		<label id="addSecLvl2Label" class="btn btn-default btn-gradient btn-sm">
		  <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption2" value="2">Level 2</label>
		<label id="addSecLvl3Label" class="btn btn-default btn-gradient btn-sm">
		  <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption3" value="3">Level 3</label>
		<label id="addSecLvl4Label" class="btn btn-default btn-gradient btn-sm">
		  <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption4" value="4">Level 4</label>
		<label id="addSecLvl5Label" class="btn btn-default btn-gradient btn-sm">
		  <input class="radioinput" type="radio" name="addSecLvlOptions" id="addSecLvloption5" value="5">Level 5</label>
	</div>
	 <input required type="text" name="addSecLvl" id="addSecLvl">

JavaScript

//Validating Add Radio Buttons
$('#addSecLvlButtons').on('click', '.radioinput', function() {
	console.log($(this));
    $('#addSecLvl').val($(this).val());
});


//Validate the form and show hidden fields
$('#addUser').validate(
{
    debug: false,
    ignore: [],
    rules: {
        addFirstName: "required",
        addLastName: "required"
    },
    messages: {
        addFirstName: "Please enter the new user's first name",
        addLastName: "Please enter the new user's last name"
    }
});