Why is this code working on my desktop but not on shopify

[NoahOnyejese]

Hi guys, 

Lately, I've been trying to code something on Shopify, after first coding it on my coding application I tested it on my Live server and it worked perfectly fine. 

Unfortunately, I tried it on Shopify but with no success.

I don't know why but maybe one of you experts might know why it doesn't work.

HTML:

<form>
    <input type="radio" value="s1"></input>
    <input type="radio" value="s2"></input>
    <input type="radio" value="s3"></input>
    <input type="radio" value="s4"></input>
    <input type="radio" value="s5"></input>
    <input type="radio" value="s6"></input>
    <br>
    <div class="main"></div>
</form>

CSS:

  .main {
        background-color: transparent;
        border: 1px solid white ;
        width: 50px;
        height: 50px;
        text-align: center;
    }

    .main.color1 {
        background: blue;
    }

JS:

const form = document.querySelector('form');
const color = document.querySelectorAll('.main');

document.querySelector('form').addEventListener('change', function(e) {

  let colorCodeD = [...form.querySelectorAll('input[type=radio]:checked')].map(elementD => elementD.value).join('');

  color.forEach(elementD => {
    elementD.classList.toggle('color1', colorCodeD === 's1');
  })
  console.log(colorCodeD);
});
  

 I compressed it to make it more understandable and simple. Please Help me I've been stuck forever on this on. haha.

[NARESH_KANSARA]

@NoahOnyejese  Need to use liquid sentence  

[NoahOnyejese]

I don't fully understand please explain.