В общем всю эту хрень, имеется ввиду подход связывания элементов на странице с товарами на сервере, в помойку. У вас как разработчика вообще не должна болеть голова какую циферку приляпать к имени класса или идентификатора, и нужно ли вообще такой дурью маяться.
Товары на сервере должны храниться под уникальным значением, что это может быть уже говорилось. Товары на страницу сервер выводит в цикле, где сразу и связывает по этому уникальному значению необходимые для него и работы на клиенте элементы на странице.
Название товара никак не может служить в качестве уникального значения, хотя бы уже потому, что нужно учитывать "человеческий фактор", то есть невольные и возможные ошибки со стороны администратора.
Самое простое, это автоматическое формирование уникального ID непосредственно базой данных, начиная от 1.
Элементы полей формы могут находится даже вне ее, но связаны с ней атрибутом form. Это означает, что группы радио кнопок при выводе сразу уже могут быть описаны как принадлежащие своей форме, которой даже не существует на странице, и которая добавляется на нее динамически.
Пусть в базе имеется две пиццы под идентификаторами 23 и 17. Для того чтобы получить на сервере что выбрал клиент, нужно всего лишь связать по этим идентификаторам радио кнопки и их формы. Все, кучи абстрактных циферок втыкаемых везде по всей странице совсем не нужно.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function() {
$('button.order').click(function() {
$('<form id=' +
$(this).data('form') + '><input value="' +
$(this).parent().find('h4').text() + '"><button>Заказать</button></form>').appendTo('body').submit(function(e) {
e.preventDefault();
alert(JSON.stringify($(this).serializeArray()))
$(this).remove()
})
})
});
</script>
</head>
<body>
<div>
<h4>Пицца с сыром</h4>
<label><input form="23" type="radio" name="size[23]" value="1" checked="" /> 23 см</label>
<label><input form="23" type="radio" name="size[23]" value="2" /> 30 см</label>
<label><input form="23" type="radio" name="size[23]" value="3" /> 36 см</label>
<button class="order" data-form="23">Заказать</button>
</div>
<div>
<h4>Пицца без сыра</h4>
<label><input form="17" type="radio" name="size[17]" value="1" checked="" /> 23 см</label>
<label><input form="17" type="radio" name="size[17]" value="2" /> 30 см</label>
<label><input form="17" type="radio" name="size[17]" value="3" /> 36 см</label>
<button class="order" data-form="17">Заказать</button>
</div>
</body>
</html>
Как видим наличия скрытых полей в форме для передачи выбора совсем не требуется, вся информация нужная серверу передается самими кнопками. Сервер получит массив size, в котором ключ будет идентификатором товара, по которому легко проверить действительно ли это товар, а значением его характеристика, которую также легко проверить. Если запрос в базу по этим параметрам вернул и название пиццы, и ее размер, значит заказ не фейковый, по крайней мере на 20%.
А вот название пиццы в форме, если уж так хочется выводить, то полем без имени, только для информации пользователю. На сервер же оно не передается, ибо оно ему совсем не требуется.
