Давайте перенесемся на десятилетие вперед и сделаем что-нибудь подобное, но я бы, вероятно, заменил counter на что-то более точное, например, $row['product_id']. Стандартизируя имена входных переменных, вы избегаете постоянно меняющихся входных данных и передаете простейшую информацию в javascript.
Ваше событие onclick также должно быть прослушивателем, но мы оставим это на другой день.
В этом случае Onclick подойдет.
Фигурные скобки {} сообщают серверу точное имя переменной.
'' Одинарные кавычки означают, что вам не нужно экранировать строку, и ее легче читать.
Единственное место, где я оставил двойные кавычки, это заголовок, потому что он может содержать что-то вроде «Эликсира О'Кифса», в котором будут ошибки при одинарных кавычках.
<?php
foreach ($dbo->query($q1) as $row) {
$counter = $counter + 1;
// the H4 should be styled with css, shouldn't have a <p> tag inside it
$string1 = "
<div class='container'\"'>
<div class='row' >
<div class='col'>
<h4 id=''>Title</h4>
<p style='text-align: center;' ><input id = '{$titleID}' type='text' name='title' value = \"{$title1}\" placeholder=\"{$title1}\"></p>
</div>
<div class='col'>
<h4 id=''>Desc</h4>
<textarea wrap id='desc{$counter}' name='text' rows='5' cols='34'>{$description}</textarea>
</div>
<button id='' onclick='SaveProductItems({$counter})'>Submit</button>
</div>
</div>";
?>
<script>
function SaveProductItems(counter){
var val1 = document.getElementById('title'+counter).value;
var val2 = document.getElementById('desc'+counter).value;
var val3 = document.getElementById('cost'+counter).value;
var val4 = document.getElementById('quantity'+counter).value;
}
</script>
Код (разметка):