JSFiddle - React, Tailwind, and code Playground

by afnguyen

HTML

<script src="https://where-to-buy.co/Scripts/jquery-1.6.1.min.js"></script>
 <div>
        <input class="radioOptions" type="radio" name="rbnNumber" value="1,2" />
        Number 1<br />
        <input class="radioOptions" type="radio" name="rbnNumber" value="2,3" />
        Number 2
        <br />
        <input class="radioOptions" type="radio" name="rbnNumber" value="3,4" />
        Number 3
        <br />
        <p>
        </p>
        <input type="text" name="retailerProductId" id="retailerProductId" class="retailerProductId"></input>
        <span class="actualPrice"></span>
    </div>

CSS

input[type="radio"]
        {
            background: url("https://where-to-buy.co/content/images/selector.png")no-repeat;
            padding: 0;
            display: inline-block;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            vertical-align: middle;
            border: 1px solid black;
        }
        input[type="radio"]:checked
        {
            background: url("https://where-to-buy.co/content/images/selectorhighlighted.png")no-repeat;
        }

JavaScript

$(document).ready(function () {
            $('.radioOptions').click(function () {
                var selValue = $('input[name=rbnNumber]:checked').val().split(",")[0];
                var rpValue = $('input[name=rbnNumber]:checked').val().split(",")[1];
                $('input[name=retailerProductId]').val(selValue);
                $('span[class=actualPrice]').text(rpValue);


            });
        });