Stalker_RED

Потому что на момент выполнения строки $('.timeline').each(function(){
элемент <div class="timeline"></div> не существует.

_{и вообще, это жесть}

Все становится проще, когда знаешь как эти штуки называются, ага?
https://www.google.com/search?q=svg+кривые+безье

$body.on("mousedown", function (e) {
    if ($.contains($popup, e.target)) {
        e.stopPropagation();
    } else {
        $popup.remove();
        $("#all").css({"opacity":1,"background":"white"});
    }
 });

выглядеть будет https://site.ru/?city=spb/post?id=23

Вы конечно можете в адресную строку браузера любую ересь написать, но тогда и серверную часть придется изобретать, ну чтобы она смогла разобрать эту вашу хитрую строку.
Чтобы не изобретать это для каждого проекта заново придумали стандарты.
https://tools.ietf.org/html/rfc3986

И если вам нужно передать два параметра, то выглядеть оно будет так:
https://site.ru/?city=spb&postid=23

при отправке submit будет отправлять на страницу существующую физически - spb.php затем post.php

Вы конечно можете это сделать, но зачем? Вы действительно хотите создавать физически существующие страницы для каждого города? У меня в текущем проекте их более 10 тысяч, например. Замучался бы создавать.
Можете начать отсюда: Как хранят свои страницы крупные сайты?

Ответ на вопрос в заголовке: да, вы можете переводить.
Вот с выкладыванием все сложнее - зависит от лицензии оригинала и юрисдикции, в которой вы выкладываете (это не про ютуб, а вообще).
В случае конкретно с ютубом - добавляется еще их ЕУЛА и штатовские законы. Во многих случаях можно, но уверен, что не во всех.

Вот пример с подсветкой svg-элементов при наведении на ссылку

По такому-же принципу делается и обратное, изменение состояния html-элемента (чекбокса) при клике по svg-элементу.