[Résolu] Differentes données en fonction des boutons

Bonjour,
Je rencontre un problème qui me semble assez complexe (à résoudre mais également à expliquer).
Alors voilà, j'aimerai avoir 2 boutons: origines et sous-origines. Lorsque l'utilisateur clique sur le bouton origine, une liste de radio boutons apparait. J'aimerai que en fonction du radio bouton sélectionné par l'utilisateur dans les origines, lorsque celui-ci clique sur sous-origine d'autres radio boutons apparaissent. Cependant, ces radio boutons auront des valeurs différentes en fonction de quel radio bouton est sélectionné.

Pour l'instant j'ai fais ça, mais lorsque je passe d'un bouton à l'autre (d'origine à sous-origine et vis-versa) le radio bouton qui était sélectionné ne l'est plus. De plus je n'arrive pas à afficher différents contenus pour sous origines en fonction de quel radio bouton est sélectionné pour origines. Voici mon code:

<input type="button" name="origines" value="0rigines" id="origines" onclick="listeOrigines()"/>
    <input type="button" name="origines" value="Sous origines" id="sousOrigines" onclick="listeSousOrigines()"/>

<script>
        function listeOrigines(){
            document.getElementById('listeSousOrigines').style.display = 'none';
            document.getElementById('listeOrigines').innerHTML=
                '<input type="radio" name="origines" value="reception" id="reception"/> <label for="reception">Reception</label>\n' +
                '    <input type="radio" name="origines" value="chargement" id="chargement"/> <label for="chargement">Chargement</label><br />\n';
            document.getElementById('listeOrigines').style.display = 'block';
        }
        function listeSousOrigines(){
          document.getElementById('listeOrigines').style.display = 'none';
 
           if(origines.value==reception){
               document.getElementById('listeSousOrigines').innerText="reception est selectionné"
           }
           if(origines.value==chargement) {
               document.getElementById('listeSousOrigines').innerText="reception est selectionné"
           }
           else{
               document.getElementById('listeSousOrigines').innerText="rien n'est selectionné"
           }
            document.getElementById('listeSousOrigines').style.display = 'block';
        }
    </script>

    <p id="listeOrigines"></p>
    <p id="listeSousOrigines"></p>

Lorsque je selectionne un radio boutton, cela me met toujous: "rien n'est selectionné". Comment faire ?

Merci pour vos réponses !

Merci beaucoup !