Николай Чуприк

А если тупо:

if ($_POST['name']) {
        $name = "<span style='font-weight: bold'>Имя клиента:</span>".$_POST['name'];
}

Минус перед $('.one').outerHeight() выглядит подозрительно. Если допустить, что блоки one и two начинаются на одном уровне, то allHeight получается отрицательным. Скорее всего, надо или поставить общий минус ко всему выражению, или сделать так:

var allHeight = $('.one').outerHeight() + $('.two').offset().top - $('.one').offset().top;

Это зависит уже от желаемого дизайна, о котором я могу лишь строить догадки.

Я бы делал так. Вертикальный участок соединительной линии — отдельный зелёный <div id="verticalLine">. Горизонтальные участки зелёной линии относятся к с своим блокам. Далее определяем координаты середины подсвеченных блоков в правой и левой колонках, и позиционируем-растягиваем verticalLine соответственно.

Сделать key глобальной переменной и брать

key = (key+1) % colors.length

myElementVisibility = (document.body.clientHeight + $(window).scrollTop() > $('#myElement').offset().top);

$('#ans-images-box').index($('#ans-images-box.selected')[0]);

или если номер, прописанный в span, то

$('#ans-images-box.selected').siblings('span').html();

$('#speaker').click(function(){
    var v=$('#volume');
    v.val( 50 - parseInt(v.val()) );
  });

Мой вариант. Надо делать в SVG. Заготовить 4 файла:

1-2. Две текстуры размером на всё поле картинки: с горизонтальным направлением древесины и с вертикальным.

3-4. Из чертежа двери сделать две маски: одну для участков с горизонтальным направлением текстуры, другую — с вертикальным.

Ну и всё это совместить. Только имейте ввиду, что вы показали справа картинку отрендеренную, там присутствуют тени. Т.е. дело не только в наложении текстур, но и в освещении, и в рендере. Поэтому не ждите, что за счёт текстур вы получите такую вот картинку, как показали.

Для улучшения могу посоветовать поверх всего этого наложить сам чертёж, чтобы были дополнительно прорисованы рёбра, т.к. иначе они не будут видны (это будет просто граница двух текстур, никак больше не выделенная).

Какие-то все злые!

Вы в коде заменяет сами дивы. При этом обработчики событий, которые были на "старых" дивах пропадают. Поэтому всё срабатывает один раз. Конечно можно повесить обработчики и на "будущие" дивы с помощь live. Но не стоит.

Замена класса — основная типовая операция, не надо заменять дивы, замените только класс с помощью addClass и removeClass, и обработчики останутся на месте.

Islam Ibakaev запостил пример.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
   $('.block').click(function(){
       $(this).css({'backgroundColor' : 'black'});
       var myClass = $(this).attr('class');
       var ind = $('.'+myClass).index(this);
       console.log(myClass);
       if (ind) console.log(ind);
    });
</script>

Когда вы используете присвоение значения innerHTML (даже через +=) вы полностью заменяете html-содержимое на новое. При этом обработчик, который вы повесили на кнопку id=addnew слетает. Это уже не "та" кнопка с обработчиком, а новая такая же, но уже без обработчика.

Надо использовать appendChild.