Максим

Потому что нужно добавить еще одну радио кнопку с таким же именем

Без проблем. Не нравится - не изучайте.
Только будьте готовы что 97% всех вакансий/проектов пройдут мимо вас, потому что там верстка будет нужна.
Но вам никто не может запретить попытаться найти остальные 3% и среди этих 3% попытаться найти что-то стоящее.

https://jsfiddle.net/xgkbzqe1/

В вашем коде было:
1. Ищете элемент по id, который называется .img
2. toggle пишется так.

Обычно для ловли таких ошибок достаточно пользоваться хорошим редактором с подсветкой ошибок и открытой консоли, которая тоже покажет ошибки и js и почему не применяется css.

Вот буквально вчера делал с помощью js.
Алгоритм простой:
1. Взять цвет фона
2. Перевести hex в hsl
3. Если l в hsl выше 0.8 (то есть, фон яркий), берем из hsl параметр hue (оттенок), берем насыщенность 100% и яркость 10%, и конвертируем новый темный оттенок обратно в hex
4. Применяем этот hex к тексту

Таким образом мы имеем либо белый текст на темном фоне (по-умолчанию), либо темный текст, слегка подкрашенный в оттенок фона, на светлом фоне. Почему подкрашенный? Потому что чистый черный на условно светло-розовом будет смотреться плохо. А вот слегка розоватый — отлично.

https://webref.ru/css/mix-blend-mode
Еще можно вот так

VDS - полностью управляемая вами виртуальная машина с ОС, то есть консоль, ssh, и ставьте туда какое хотите ПО. В таком случае сервер полностью в вашем распоряжении - можете даже его перезагружать.

PHP - или т.н. shared-хостинг, когда на одной операционной системе вам дают не полную свободу действий, а только доступ папке, куда вы зальете свои файлы, ну и пару плюшек в добавок. Базы данных, которые вы можете использовать, а так же языки программирования, настройки и т.д. за вас полностью решает хостинг. Вы не можете ничего, кроме как залить по FTP свои файлы, и радоваться.

Но смею добавить, что PHP хостинг всегда дешевле и призводительней, чем VPS/VDS, так как вам выделяется не целая Виртуальная машина с ОС, а всего лишь процент от общего пропускного канала и ресурсов общей для всех системы. Как коммуна с хиппи.

Все можно хранить. Но nosql базы бывают разные, заточенные под разные задачи.
Надо уточнять для чего вам база.
memcached, например, тоже можно сказать что это Nosql база. Используется для ускорения доступа.

А mongodb это скорее объекты, а не документы.

Например, вам нужно хранить такие поля
имя, фамилия, телефон
имя, адрес
фамилия, инициалы, год рождения
телефон, адрес, описание

как вы видите, поля разные. Поэтому в обычной реляционной базе, вам нужно будет заранее создать столбцы для каждого значения. При этом, если в данных куча "пустот", место зачастую все равно будет выделяться. Плюс нужно будет указывать типы данных для каждого столбца.

А в mongodb,например, можно просто хранить объекты как есть:
Имя: Вася, Фамилия: Пупкин, телефон 02
Имя: Петя, адрес: "Останкино, 1"
Имя: Вера, инициалы: "В.Б.", год рождения: нескажу
телефон: "красненький", адрес: "Останкино, 1", описание: "что-то где-то"

И каждый объект хранится ровно с теми полями, которые в нем есть.
При этом поля могут быть разного типа.
При этом можно нормально пользоваться запросами и разными функциями.

Да, тут нет joins, зато монго оптимизирована для работы с подобным и размеры коллекций ее не слишком будут смущать.

начать можно с чего-то такого

const li = document.querySelectorAll('li');
li.forEach(n => n.addEventListener('click', onClick));

function onClick(e) {
  e.preventDefault();
  li.forEach(n => n.classList.toggle('active', n === this));
  const href = this.querySelector('a').getAttribute('href');
  document.querySelector(href).scrollIntoView({
    behavior: 'smooth',
  });
}

Нужно в одной функции сбросить все активные классы, затем добавить активный класс к текущему элементу и затем выполнять нужные действия:

let parent = document.querySelector("ul");
let child = document.querySelectorAll("ul li");


let anchors = document.querySelectorAll('a[href*="#"]');

for (let anchor of anchors) {
  anchor.addEventListener("click", function (e) {
    e.preventDefault();
    
    for (let i = 0; i < child.length; i++) {
      child[i].classList.remove("active");
    }
    
    e.target.classList.add("active");
    this.parentNode.classList.add("active");
    let blockID = anchor.getAttribute("href").substr(1);

    document.getElementById(blockID).scrollIntoView({
      behavior: "smooth",
      block: "start"
    });
  });
}

комментируй так
<!-- <div></div> -->

Потому что синтаксис комментариев в HTML выглядят иначе. Вот так:
<!-- Комментарий -->