Александр Тимофеев

Можно использовать HTML import, но нужно немного уметь в JavaScript: https://learn.javascript.ru/link-import

Никак.

Так как у вас много элементов по заданному селектору, нужно использовать each(), что-то вроде этого:

$('.table-chto-vishlo tr').each(function(){
$(this).find('td:last-child').on('click',function(){
выполняемый код
});
});

А я бы сделал:

.table-chto-vishlo tr:first-child{
  text-transform: uppercase;
}

$('#razmer-pizzi li').click(function(){
  var size = [25, 30, 40][$(this).index()];
  $('.table-chto-vishlo tr:first-child').html('<td>Размер пиццы '+size+' см</td>'); 
  //По хорошему, надо создать внутри ячейки span и уже его изменять, а не весь текст мусолить
});

Подход конечно странный, но ответ на вопрос "что именно не так" такой:
добавьте [0] после селекторов. Как-то так jsfiddle.net/vL32umyL
И да, в jQuery есть eq() - чуть более удобная штука чем nth-child(3), имхо.

а можно просто проставить значение у data-атрибутов и подставлять только нужный размер
или $('#pizzaSize').html($(this).val())
в обработчике.
UPD:На вопрос что в коде не так ,отвечаю- 1) вы засунули ветвление туда где нет различной логики в зависимости от выбранного элемента. Логика везде одна, значение чуть разнится -на 2 цифры. 2) Ради этой логики вы сраниваете ссылки на элемнты в DOM. Т.е. через jquery гуляете по нему в поисках элемента ради 1 числа. 3)Такой код невозможно поддерживать. если поменять местами порядок элементов - все полетит к черту. Если добавить несколько размеров или тип теста - все полетит к черту.