em привязываются к текущему размеру шрифта.
Для разметки адаптивной/резиновой сетки удобно успользовать проценты, а для всяких отступов/полей при формирования блока зачастую удобнее em или px
Перед отправкой формы вы добавляете текст из формы в конец body, переписывая при этом всю страницу(!), а затем происходит собственно отправка формы, и с сервера прилетает "свежий" html без этих правок.
Для десктопа есть множество конвертеров, и немножко проигрывателей. Но в браузере, похоже, что никак. Потому что опорные кадры (key frame). Можно наверное написать специализированный плеер, но готовые мне не встречались.
Ну, хоть какое-то соответствие всё-же должно быть. Например одинаковая нумерация у картинок и подписей, или дата создания или хоть что нибудь. Иначе придется звонить Гарри Поттеру.
У вас в .quantity не 13 а 13 × <span class="amount">70 руб.</span>
Вынесите его в отдельный элемент, например. И, скорее всего, вам понадобится parseInt().
А вообще жесть, конечно.