JSFiddle - React, Tailwind, and code Playground

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" />
        <label class="radioPosition" for="radio">
            <img src="https://where-to-buy.co/content/images/selector.png" alt="selector" /></label>
        Number 1<br />
        <input  class="radioOptions" type="radio" name="rbnNumber" value="2,3" />
         <label class="radioPosition" for="radio">
            <img src="https://where-to-buy.co/content/images/selector.png" alt="selector" /></label>
        Number 2
        <br />
        <input class="radioOptions" type="radio" name="rbnNumber" value="3,4" />
         <label class="radioPosition" for="radio">
            <img src="https://where-to-buy.co/content/images/selector.png" alt="selector" /></label>
        Number 3
        <br />
        <p>
        </p>
        <input type="text" name="retailerProductId" id="retailerProductId" class="retailerProductId"></input>
        <span class="actualPrice"></span>
    </div>

CSS

.radioOptions {
           opacity: 0;
       }
       .radioPosition {
             margin-left: -20px;
       }


input.radioOptions:checked + label.radioPosition {
    background: red;
}

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);


            });
        });