JSFiddle - React, Tailwind, and code Playground

by Kishore Sahasranaman

HTML

<div class="col-sm-12">
    <div class="form-group">
        <label for="inputConfigOption14"></label>
        <div>
            <label for="inputConfigOption14">What kind of backups</label>
        </div>
        <label class="" id="No backups at all"></label>
        <div class="iradio_square-blue" style=" position: relative;">
            <label class="" id="No backups at all">
                <input name="configoption[14]" type="radio" value="43">
            </label>No backups at all</div>
        <label id="Weekly backups with professional backup"></label>
        <div class="iradio_square-blue" style="position: relative;">
            <label id="Weekly backups with professional backup">
                <input name="configoption[14]" type="radio" value="43 ">
            </label>Weekly backups with professional backup</div>
        <label class="" id="Monthly backups with professional backup"></label>
        <div class="iradio_square-blue" style="style=">
            <label class="" id="Monthly backups with professional backup">
                <input name="configoption[14]" type="radio" value="43 ">
            </label>Monthly backups with professional backup</div>
    </div>
</div>
<br>
<br>
<div id="weeklymsg">Weekly backup information</div>
<div id="monthlymsg">Monthly backup information</div>

JavaScript

document.getElementById("weeklymsg").style.display = "none";
document.getElementById("monthlymsg").style.display = "none";

var p = document.querySelectorAll(".form-group input[type='radio']");
for (var i = 0; i < p.length; i++) {
    p[i].onclick = function (e) {
        var closestStr = closest(e.target, "label").id;
        if (closestStr == "Monthly backups with professional backup") {
            document.getElementById("weeklymsg").style.display = "none";
            document.getElementById("monthlymsg").style.display = "block";
        } else if (closestStr == "Weekly backups with professional backup") {
            document.getElementById("weeklymsg").style.display = "block";
            document.getElementById("monthlymsg").style.display = "none";

        } else {
            document.getElementById("weeklymsg").style.display = "none";
            document.getElementById("monthlymsg").style.display = "none";
        }
    }
}

function closest(el, selector) {
    var matchesFn;
    // find vendor prefix
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    });

    // traverse parents
    while (el !== null) {
        parent = el.parentElement;
        if (parent !== null && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}