Loop not stops in condition

I was just trying to display a particular content in a loop in list and after a condition is met it should display in a div.This is what i have tried

function the_meta() {
  if ( $keys = get_post_custom_keys() ) {
    echo "<ul class='post-meta'>n";
    $i = 0;
    foreach ( (array) $keys as $key ) {

        $keyt = trim($key);

        if ( is_protected_meta( $keyt, 'post' ) )
            continue;

        $values = array_map('trim', get_post_custom_values($key));
        $value = implode($values,', ');
        echo apply_filters('the_meta_key', "<li id='slots_".$key."'><span class='post-meta-key'>$key:</span> $value</li>n", $key, $value);

        if (++$i > 8)
           echo apply_filters('the_meta_key', "<div><span class='post-meta-key'>$key:</span> $value</div>n", $key, $value);

    }
    echo "</ul>n";
  }
}

what I am getting is as follows

<ul class='post-meta'>
   <li id='slots_Numeri_estratti_1'><span class='post-meta-key'>Numeri_estratti_1:</span> 22</li>
   <li id='slots_numeri_estratti_2'><span class='post-meta-key'>numeri_estratti_2:</span> 23</li>
   <li id='slots_numeri_estratti_3'><span class='post-meta-key'>numeri_estratti_3:</span> 24</li>
   <li id='slots_numeri_estratti_4'><span class='post-meta-key'>numeri_estratti_4:</span> 25</li>
   <li id='slots_numeri_estratti_5'><span class='post-meta-key'>numeri_estratti_5:</span> 26</li>
   <li id='slots_numeri_estratti_6'><span class='post-meta-key'>numeri_estratti_6:</span> 27</li>
   <li id='slots_numeri_estratti_7'><span class='post-meta-key'>numeri_estratti_7:</span> 28</li>
   <li id='slots_numeri_estratti_8'><span class='post-meta-key'>numeri_estratti_8:</span> Concorso Nr. 36 - Montepremi complessivo € 10.474.698,21</li>
   <li id='slots_numeri_estratti_9'><span class='post-meta-key'>numeri_estratti_9:</span> 21</li>
   <div id='slots_numeri_estratti_9'><span class='post-meta-key'>numeri_estratti_9:</span> 21</div>
   <li id='slots_numeri_estratti_10'><span class='post-meta-key'>numeri_estratti_10:</span> 33</li>
   <div id='slots_numeri_estratti_10'><span class='post-meta-key'>numeri_estratti_10:</span> 33</div>
</ul>

The values are displaying twice, one in list and other in div.I have been searching on Google for hours and couldn’t get any results to solve it.Someone please help me .Thanks!!