<style>
    .whmp_order_combo.whmp_radio_combo{
        position: relative;
        padding: 15px 20px;
        background: #fff;
        border: solid 1px #4480c5;
        border-radius: 5px;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio {
        display: block;
        background: #fff;
        border: 1px solid #dfecff;
        border-radius: 4px;
        -webkit-transition: .2s;
        transition: .2s;
        padding: 15px ;
        padding-left: 39px;
        font-weight: 300;
        color: #16438a;
        position: relative;
        margin-bottom: 5px;

    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio.whmpress_checked {
        background-color: #f1f4fb;
        border-color: #4480c5;
        -webkit-box-shadow: 0 2px 4px rgba(68,128,197,.44);
        box-shadow: 0 2px 4px rgba(68,128,197,.44);
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio span{
        margin-left: 2px;
        padding: 0 8px;
        background: #fbce3b;
        border-radius: 10px;
        font-weight: 500;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio input[type=radio] {
        display: none;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio span.whcom_circle_radio {
        position: absolute;
        top: 20px;
        left: 10px;
        height: 18px;
        width: 18px;
        background-color: #fff;
        border: 1px solid #2e578b;
        border-radius: 50%;
        -webkit-transition: .2s;
        transition: .2s;
    }
    .whmp_order_combo.whmp_radio_combo label.whmpress_radio.whmpress_checked span.whcom_circle_radio:after {
        content: "";
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #2e578b;
        -webkit-transition: .2s;
        transition: .2s;
    }
</style>
<div class="whmp_order_combo whmp_radio_combo">

    <form action="{$action_url}">
        <input type="hidden" value="add" name="a">
        <input type="hidden" value="{$pid}" name="pid">
        <input type="hidden" value="{$currency_id}" name="currency">

        <div class="whmpress_radio_container">
            <div class="whcom_row">
                <!--<input type="radio" value="">Select Duration</input>-->

                {foreach from=$data item=whmp}
                {assign var=unique_id value=10|mt_rand:100}
                <div class="whcom_col_lg_12">
                <label for="{$unique_id}" class="whmpress_radio">
                    <span class="whcom_circle_radio"></span>
                    <input  name="billingcycle" class="whcom_op_input wcop_input" type="radio" value="{$whmp.duration}" id="{$unique_id}" data-option-index="">{$whmp.duration}  {if $whmp.discount} <span>-{$whmp.discount}</span> {/if} <span style="background-color: transparent; float: right;">{$whmp.prefix}<strong>{$whmp.amount}</strong>{$whmp.decimal}{$whmp.fraction} {$whmp.suffix}</span></input>
                </label>
                </div>
                {/foreach}
        </div>
        </div>
        {$product_order_button}

    </form>

</div>

<script>
    jQuery('label.whmpress_radio').on('change', function ()
    {
        jQuery('label.whmpress_radio').removeClass('whmpress_checked');
        jQuery(this).closest('label').addClass("whmpress_checked");
    });
</script>