Loop within Loop causing undesired output - php

Question

I have the following loop...
for ($i = 1; $i <= 10; $i++) {
echo '<span class="srch-val-'.$i.'">'.apply_filters(" $value\n", $value)."</span>";
}
within...
while ( $query->have_posts() ) : $query->the_post();
if ( $keys = get_post_custom_keys() ) {
echo "<div class='clearfix card-prod ".($i==0?'first':'')."'><span class='card-title'>";
echo the_title();
echo "</span>";
foreach ( (array) $keys as $key ) {
$keyt = trim($key);
if ( '_' == $keyt{0} || 'pricing' == $keyt || 'vehicleType' == $keyt || 'coverageRegion' == $keyt || 'locationType' == $keyt )
continue;
$values = array_map('trim', get_post_custom_values($key));
$value = implode($values,', ');
for ($i = 1; $i <= 10; $i++) {
echo '<span class="srch-val-'.$i.'">'.apply_filters(" $value\n", $value)."</span>";
}
}
echo "\n"; echo '<img src="wp-content/themes/cafc/images/top-choice.jpg" alt="Top Choice" class="topchoice">';echo '<img src="wp-content/themes/cafc/images/cards/dummy.png" />'; echo the_excerpt()."</div>";}
$i++;
endwhile;
When I execute my code however, say my while() loop returns 4 values, my for() loop then outputs 10 of the same thing, in my browser its shown as...
All I want to do is for each <span class="srch-val'> is to add a number after each 'srch-val' class, so srch-val-1, srch-val-2 etc...

Answer 1

You have an extra for-loop inside your foreach-loop. Remove this loop and just do the echo directly inside the foreach-loop and increment $i each time you actually use it.
Like this:
$i = 1;
while ( $query->have_posts() )
{
$query->the_post();
if ( $keys = get_post_custom_keys() )
{
echo "<div class='clearfix card-prod ".($i==0?'first':'')."'><span class='card-title'>";
echo the_title();
echo "</span>";
foreach ( (array) $keys as $key )
{
$keyt = trim($key);
if ( '_' == $keyt{0} || 'pricing' == $keyt || 'vehicleType' == $keyt || 'coverageRegion' == $keyt || 'locationType' == $keyt )
continue;
$values = array_map('trim', get_post_custom_values($key));
$value = implode($values,', ');
echo '<span class="srch-val-'.$i.'">'.apply_filters(" $value\n", $value)."</span>";
$i++; // move the incrementer here so that you only increment when you actually use it.
}
echo "\n"; echo '<img src="wp-content/themes/cafc/images/top-choice.jpg" alt="Top Choice" class="topchoice">';echo '<img src="wp-content/themes/cafc/images/cards/dummy.png" />'; echo the_excerpt()."</div>";
}
}

Answer 2

You create a variable at the beginning of your foreach-loop (say $counter == 1;)
Than your For-loop should be:
for($i = $counter; $i <= $counter+10; $i++){
//do your span-class thing here
}
And at the end of the foreach loop do: $counter += 10;