CSS/Javascript to turn product select to Price table

price-table.html

<style type="text/css">#row-product_id_page-0-0 .am-element-title {
    float: none;
    width:auto;
    text-align:center;
    padding: 1em;
}
#row-product_id_page-0-0 .am-element {
    padding: 1em;
    margin:0;
    display: grid;
    grid-gap: 1px;
    grid-template-columns: 1fr 1fr 1fr;
}
#row-product_id_page-0-0 .am-element br {
    display:none;
}
#row-product_id_page-0-0 .am-element label {
    padding:1em;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
    cursor:pointer;
    position: relative;
}
#row-product_id_page-0-0 .am-element label:hover {
    box-shadow: 0 0 0 1px #753fd1;
}
#row-product_id_page-0-0 .am-element label.active,
#row-product_id_page-0-0 .am-element label.active:hover {
    box-shadow: 0 0 0 4px #753fd1;
    background: #f5f1fc;
}
#row-product_id_page-0-0 .am-element input {
    display:none;
}
#row-product_id_page-0-0 .am-product-title,
#row-product_id_page-0-0 .am-product-terms {
    display: block;
    text-align:center;
    margin-bottom:1.5em;
}
#row-product_id_page-0-0 .am-product-terms {
    line-height: 160%;
    font-size: .8rem;
}

label[for=product-2-12] .am-product-title::before {
    content: 'Annual';
    display: block;
    text-align:center;
    margin-bottom:1em;
    font-size: .8rem;
    font-weight: normal;
}

label[for=product-2-13] .am-product-title::before {
    content: 'Six Monthly';
    display: block;
    text-align:center;
    margin-bottom:1em;
    font-size: .8rem;
    font-weight: normal;
}

label[for=product-2-2] .am-product-title::before {
    content: 'Monthly';
    display: block;
    text-align:center;
    margin-bottom:1em;
    margin-top:.5em;
    font-size: .8rem;
    font-weight: normal;
}

label[for=product-2-12]::before {
    content: "Best Value";
    position: absolute;
    top: -12px;
    color: white;
    left: 0;
    right: 0;
    margin: auto;
    width: 80px;
    border-radius: 5px;
    background-color: #753fd1;
    font-size: .8rem;
    font-weight: normal;
    text-align: center;
    padding:.2em;
}
</style>
<script type="text/javascript">
    <!--
    jQuery(function(){
        jQuery('[type=radio][name^=product_id_page-0]').change(function(){
            jQuery('#row-product_id_page-0-0 label').removeClass('active');
            jQuery('#row-product_id_page-0-0 input:checked').closest('label').addClass('active');
        }).change();
    });
    -->
</script>