JSFiddle - React, Tailwind, and code Playground

by riyadh

HTML

<form action="#">
              <p>
                <input type="radio" id="odoj" name="tilawah-program"  value="d" onclick="change(this)">
                <label for="odoj">One Day One Juz (ODOJ)</label>
              </p>
              <p>
                <input type="radio" id="odalf"  name="tilawah-program" value="ds" onclick="change(this)">
                <label for="odalf">One Day Half Juz (ODALF)</label>
              </p>
              <p>
                <input type="radio" id="odol" name="tilawah-program" value="f" onclick="change(this)">
                <label for="odol">One Day One Lembar (ODOL)</label>
              </p>
            </form>
            
             <div style="margin:5px;" id="tilawahShow">
                    Silahkan pilih program tilawah Qur'an.
             </div>
            
            <script>
    function change(radio) { 
        if (radio.checked && radio.id === "odoj") {
            document.getElementById("tilawahShow").innerHTML = "odoj";
        }
        else if (radio.checked && radio.id === "odalf") {
            document.getElementById("tilawahShow").innerHTML = "odalf";
        }
        else {
            document.getElementById("tilawahShow").innerHTML = "odol"
        }
    }
</script>