JSFiddle - React, Tailwind, and code Playground

HTML

<div class="control-group questions">
    <div class="field-control">
		<p>Would you like to download your company logo?</p>
			<div class="input-wrapper">
				<div class="answer"><input class="btn-checkbox-choice" type="radio" name="groupeight" value="$49.99"/><label>Yes</label></div>
	<input class="btn-checkbox-choice" type="radio" name="groupeight" value="$0.00" /><label>No</label><br />

		</div>
	</div>
</div>
        	<span id="checkout-title">Checkout</span>
						<div class="plan-wrapper">
							<label id="silver-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="$699"  /><label>Silver Plan</label><span id="silver-plan-price">$699</span></label>
							
							<label id="gold-plan"><input class="btn-checkbox-plan" type="radio" name="groupnine" value="$999" /><label>Gold Plan</label><span id="gold-plan-price">$999</span></label>
							
						</div>
						<div class="logo-wrapper">
							<span id="personalized-logo">Personalized Logo</span>
							<output type="number" name="price" id="output-choice">
							<!--<input type="file" name="fileToUpload" id="fileToUpload" value="$50">
							<input id="upload" type="submit" value="Upload Image" name="submit">-->
						</div>
                            <div class="total-wrapper">
							<div class="wrapper-b">
								<span id="total">Total</span>
								<output type="number" name="price" id="output"></output>
							</div>
						</div>

CSS

.field-control {
padding-right: 0px;
padding-left: 0px;
margin: 0 0 10px 0;
position: relative;
min-height: 48px;
}
.randomclass{
position:relative;
}
.randomclass-two{
position:relative;
}
.btn-checkbox{
display:inline-block;
}
.top-title{
display: block;
margin-top: 10px;
margin-bottom: 10px;
color: #27A9E1;
font-family: Lato;
font-weight: 400;
font-size:20px;
}
.control-group.questions-card {
margin-top: 46px;
}

.col-sm-6.form-two {
border-left:1px solid #D6D6D6;
}
.checkout {
border-top: 1px solid #D6D6D6;
width:100%;
}
#zip-code{
float:left;
max-width: 210px;
}
select#first-opt {
float: right;
width: 180px;
height: 34px;
border: 1px solid #ccc;
}
#zipcode{
float:left;
max-width: 210px;
}
select#second-opt {
float: right;
width: 180px;
height: 34px;
border: 1px solid #ccc;
}
.first-selection {
min-height: 34px;
float: right;
max-width: 180px;
}
.second-selection{
min-height: 34px;
float: right;
max-width: 180px;
}
.answer {
display: inline;
padding-right: 60px;
}
p{
color: #5D5D5D;
font-size: 15px;
font-family: Lato;
font-weight: 400;
}
label {
margin-left: 10px;
color: #5D5D5D;
font-family: Lato;
font-weight: 400;
}
.input-wrapper {
padding-top: 10px;
padding-bottom: 10px;
}
.tax-wrapper{
border-top:1px solid #D6D6D6;
margin-top:10px;
}
.logo-wrapper{
margin-top:10px;
}
.total-wrapper{
margin-top:10px;
}
.wrapper-a{
margin-top:10px;
}
.wrapper-b{
margin-top:10px;
}
.total-wrapper{
border-top:1px solid #D6D6D6;
}
.container.form-wrapper {
margin-bottom: 50px;
}
span#checkout-title {
margin-top: 10px;
margin-bottom: 10px;
color: #27A9E1;
font-size: 25px;
font-family: Lato;
font-weight: 400;
}
span#gold-plan-price {
color: #27A9E1;
float: right;
font-size:20px;
font-family: Lato;
font-weight: 400;
}
span#silver-plan-price{
color: #27A9E1;
float: right;
font-size: 20px;
font-family: Lato;
font-weight: 400;
}
span#personalized-logo{
margin-left: 38px;
width: 200px;
color: #5D5D5D;
font-size:20px;
font-family: Lato;
font-weight: 400;
}
span#logo-price{
color:...

JavaScript

$(document).ready(function(){
     $("input[type=radio]").change(function(){
         if ($("input[name=groupnine]:checked").val() && $("input[name=groupeight]:checked").val()){
             p1 = $("input[name=groupnine]:checked").val().substring(1)*1;
             p2 = $("input[name=groupeight]:checked").val().substring(1)*1;
             $("#output").val("$"+(p1+p2));
         }
         else{
             //alert('no')
         }
      // alert($(this).val());
     })
});