Вадим

Исходя из JS кода, а так же Ваших пояснений в комментариях к вопросу, предлагаю переоформить Ваше решение следующим образом:

• Скрываем css`ом все .lvl2
  
• Было бы так же хорошо поместить все .list в отдельный контейнер, чтобы не слушать весь документ. Если это возможно, конечно.
  
• Переписываем js слудующим образом:
  

$('.list-container').on('click', '.list', listClickHandler);

function listClickHandler(){
  $(this).next('.lvl2').slideToggle(); // this - элемент, на котором произошёл клик. Соответственно $(this) - его jQuery версия
}

.next()
.slideToggle()

simonenko.su/38146501854/improving-ux-for-web-form

WEB Audio API. А графики можете как сами строить, так и какой-нибудь библиотекой. Примеры Вам уже привели выше.
https://habr.com/ru/post/210422/

Добрый день. Происходит так потому, что при использовании nth-child он смотрит на всех детей родительского контейнера. Добавив имя класса Вы лишь указываете что если ребёнок подходит под прогрессию(чётное) И одновременно с этим имеет указанный класс, то окрась. И таким образом получается, что 0 и 4 элементы рассматриваются как чётные, потому что в дереве документа так оно и есть. Если Вы добавите класс .p к p с номером 2 то увидите наглядно. Или же можете добавить ещё один элемент P без класса и тогда элемент 4 покрасится в зелёный потому что в дереве он станет не чётным.
Перепробовал через nth-child с комбинациями :not и :first-child и тоже что-то не придумалось особо.
Варианты решения:
1) Обработка на JS;
Делать выборку всех элементов с определённым классом и уже там их перекрашивать по чётности или не чётности, но в идеале добавлять модификатор, что-то вроде:
Найди все .p, к чётным добавь класс p_odd, к нечётным p_even
2) Выводить эти элементы изначально с другим классом-модификатором.