javascript - Css not working when label tag placed before input tag?

Question

The switching of the order placement of the two tags (input and label) stops either the function to run or the css to load! I've tried messing around with it but to no avail. I want the boxes to appear around the yes or no options and other than that the css is working fine so its just this one section

<ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br> ')}</div></ul>`; }).join(' ')+frm.innerHTML;

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');


:root {
    --white: #ffffff;
    --light: #f0eff3;
    --black: #000000;
    --dark-blue: #1f2029;
    --dark-light: #353746;
    --red: #da2c4d;
    --yellow: #f8ab37;
    --grey: #ecedf3;
}

/* #Primary
================================================== */

body{
    width: 100%;
    background: var(--dark-blue);
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 30px;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
h1{
    font-family: 'Poppins', sans-serif;
    font-size: 45px;
    line-height: 30px;
    color: var(--white);
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
p{
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 30px;
    color: var(--white);
    letter-spacing: 1px;
    font-weight: 500;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}

::selection {
    color: var(--white);
    background-color: var(--black);
}
::-moz-selection {
    color: var(--white);
    background-color: var(--black);
}
mark{
    color: var(--white);
    background-color: var(--black);
}
.section {
    position: relative;
    width: 100%;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.over-hide {
    overflow: hidden;
}
.z-bigger {
    z-index: 100 !important;
}


.background-color{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dark-blue);
    z-index: 1;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.checkbox:checked ~ .background-color{
    background-color: var(--white);
}


[type="checkbox"]:checked,
[type="checkbox"]:not(:checked),
[type="radio"]:checked,
[type="radio"]:not(:checked){
    position: absolute;
    left: -9999px;
    width: 0;
    height: 0;
    visibility: hidden;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label{
    position: relative;
    width: 70px;
    display: inline-block;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    margin: 17px 0;
    margin-top: 100px;
    height: 6px;
    border-radius: 4px;
    background-image: linear-gradient(298deg, var(--red), var(--yellow));
    z-index: 100 !important;
}
.checkbox:checked + label:before,
.checkbox:not(:checked) + label:before {
    position: absolute;
    font-family: 'unicons';
    cursor: pointer;
    top: -17px;
    z-index: 2;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.checkbox:not(:checked) + label:before {
    content: 'eac1';
    left: 0;
    color: var(--grey);
    background-color: var(--dark-light);
    box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07);
}
.checkbox:checked + label:before {
    content: 'eb8f';
    left: 30px;
    color: var(--yellow);
    background-color: var(--dark-blue);
    box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.checkbox:checked ~ .section .container .row .col-12 p{
    color: var(--dark-blue);
}
.checkbox:checked ~ .section .container .row .col-12 h1{
    color: var(--dark-blue);
}


.checkbox-budget:checked + label,
.checkbox-budget:not(:checked) + label{
    position: relative;
    display: inline-block;
    padding: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 260px;
    font-size: 52px;
    line-height: 52px;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0 auto;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transition: all 300ms linear;
    transition: all 300ms linear; 
    -webkit-text-stroke: 1px var(--white);
    text-stroke: 1px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
}
.checkbox-budget:not(:checked) + label{
    background-color: var(--dark-light);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}
.checkbox-budget:checked + label{
    background-color: transparent;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:not(:checked) + label:hover{
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.checkbox-budget:checked + label::before,
.checkbox-budget:not(:checked) + label::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-image: linear-gradient(138deg, var(--red), var(--yellow));
    z-index: -1;
}
.checkbox-budget:checked + label span,
.checkbox-budget:not(:checked) + label span{
    position: relative;
    display: block;
}
.checkbox-budget:checked + label span::before,
.checkbox-budget:not(:checked) + label span::before{
    position: absolute;
    content: attr(data-hover);
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    -webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
    color: var(--white);
    -webkit-transition: max-height 0.3s;
    -moz-transition: max-height 0.3s;
    transition: max-height 0.3s;
}
.checkbox-budget:not(:checked) + label span::before{
    max-height: 0;
}
.checkbox-budget:checked + label span::before{
    max-height: 100%;
}

.checkbox:checked ~ .section .container .row .col-xl-10 .checkbox-budget:not(:checked) + label{
    background-color: var(--light);
    -webkit-text-stroke: 1px var(--dark-blue);
    text-stroke: 1px var(--dark-blue);
    box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05);
}

.oval {
                width: 200px;
                height: 80px;
                background: #39ff14;
                border-radius: 40px;
                font-size: 20px;
                font-family: 'Poppins', sans-serif;
                color: var(--white);
            }

<body>
    <body>
    <div class="section over-hide z-bigger">
        <input class="checkbox" type="checkbox" name="general" id="general">
        <label class="for-checkbox" for="general"></label>
        <div class="background-color"></div>
        <div class="section over-hide z-bigger">
            <div class="container pb-5">
                <div class="row justify-content-center pb-5">
                    <div class="col-12 pt-1">
                        <h1 class="mb-4 pb-2">Lets Start</h1>
                    </div>
<form name="combitest">
  <p> Score for test 1 (Stroke) =   <span class="res"></span><br><br>
  <p> Score for test 2 (Diabetes) = <span class="res"></span><br><br>
  <p> Score for test 3 (some other test) = <span class="res"></span><br><br>
  <input type="reset" class="oval" value="Clear Answers">
</form>
</body>

    const questions=[  // questions,            answers with their associated points:
   {q:"History of Stroke",                  a:[["Yes",[10,10, 0]],["No" ,    [ 0, 0, 0]]]}
   ];
const frm =document.querySelector("form");
// create questions block first:
frm.innerHTML=questions.map(q=>{
  let nam=q.q.toLowerCase().replace(/ /g,"").substr(0,12)
  return `<div class="col-12 pt-1">
            <p class="mb-4 pb-2">${q.q}</p
          </div>
             <div class="col-xl-10 pb-5">
          <ul>${q.a.map(([a])=>`<label class="for-checkbox-budget"><input class="checkbox-budget" type="radio" name="${nam}" value="${a}"><span data-hover="${a}">${a}</span></label>`).join('<br>
')}</div></ul>`;
}).join('
')+frm.innerHTML;
let spans=[...document.querySelectorAll('span.res')];
document.querySelector("input[type=reset]").onclick=ev=>spans.forEach(sp=>sp.textContent="");
frm.onchange=ev=>{
  let res=[0,0,0], uls=document.querySelectorAll('form ul');  
  questions.forEach((qo,i)=>{ var a;
    if (a=uls[i].querySelector("input:checked")){ // only if an answer has been chosen
      let pts=qo.a.find(([el])=>el==a.value)[1]   // get array with points for all tests
      res.forEach((r,i)=>res[i]+=pts[i]);         // add points to res-array
    }    
  }); 
  res.forEach((r,i)=>spans[i].textContent=r)
};

Answer 1

The + symbol is the next-sibling combinator.

If you swap the order, then the label isn't the next sibling, it is the previous one.

There is no previous sibling combinator (as CSS generally never applies a rule based on something that appears later in the DOM tree (for reasons of performance and to avoid conflicts)).

You might be able to keep the elements in the same DOM order while changing the order they are rendered in by combining a Flexbox layout with the order property.