Show divs based on the amount of arrays

Question

Here is my function

function yyy_hero_image_option_callback() {
$hero_options = get_option( 'hero_options' ); 
$count=count($hero_options);
$totalimg=$count-4;
$html = '<div id="upload_yyy_sets">';
    for($i=1;$i<=$totalimg;$i++){ 
    if( isset( $hero_options['upload_yyy_link_1'] ) && $hero_options[ 'upload_yyy_link_1' ] ) { 
        $html .= '<div id="yyyclonedInput'.$i.'" class="yyyclonedInput">';
        $html .= '<input id="cs_product_menu_yyy_src_'.$i.'" type="text" size="36" name="hero_options[upload_yyy_link_'.$i.']" value="' . $hero_options['upload_yyy_link_'.$i.''] . '" /> <input id="cs_product_menu_yyy_src_'.$i.'_yyybutton" type="button" value="Add / Change" class="button-secondary yyy-upload-button"  /> <div class="button yyyremove">-</div>';
        $html .= '</div>';
    }
    }
    $html .= '</div>';

    echo $html;
    ?> <div class="button yyyclone">Add an Image</div> <?php 
}

Along with a little jquery, this worked out the amount of arrays, deleted the number by 4 and then displayed the amount of divs based on the resulting number. This has been working fine but now i've added another slideshow and it needs to be worked out differently.

Now here is my new function

function yyy_hero_image_option_callback() {
    $hero_options = get_option( 'hero_options' ); 
    foreach($hero_options as $key => $value){
        if (strpos($key, 'yyy')) {
            var_dump($value);
        }
    }
}

This new function just find the arrays that have the characters yyy in them.

How can I count the amount of arrays and then display them like before?

Thanks

UPDATE: Here's an image of what i'm trying to display

for every array that has the value zzz, i want it to display that amount of boxes, this image will show 3 boxes, that means there are 3 arrays with zzz in them.

Here's the array

array(9) { 
["show_hero_options"]=> string(1) "1" 
["hero_height"]=> string(5) "600px" 
["hero_width"]=> string(4) "100%" 
["hero_buttons"]=> string(4) "show" 
["upload_zzz_link_1"]=> string(105) "http://www.blahblah.com/image_link.jpg" 
["upload_zzz_link_2"]=> string(79) "http://www.blahblah.com/image_link.jpg" 
["upload_zzz_link_3"]=> string(79) "http://www.blahblah.com/image_link.jpg" 
["upload_yyy_link_1"]=> string(79) "http://www.blahblah.com/image_link.jpg" 

}

UPDATE 2a:

Here's the query just incase

jQuery(document).ready(function($){
// Hero Image zzz upload    
function zzz_updateClonedInput(index, element,param) {
    $(element).appendTo("#upload_zzz_sets").attr("id", "zzzclonedInput" +  index);
    $(element).find(">:first-child").attr("id", "cs_product_menu_zzz_src_" + index);
    $(element).find(">:first-child").attr("name", "hero_options[upload_zzz_link_" + index + "]");
    if(param)
    $(element).find(">:first-child").attr("value", "");
    $(element).find(">:first-child").next().attr("id", "cs_product_menu_zzz_src_" + index + "_zzzbutton");
}

$(document).on("click", ".zzzclone", function(e){
    e.preventDefault();
    var zzztoappend='<div id="zzzclonedInput1" class="zzzclonedInput"><input id="cs_product_menu_zzz_src_1" type="text" size="36" name="hero_options[upload_zzz_link_1]" value="" /><input id="cs_product_menu_zzz_src_1_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button" /><div class="button zzzremove">-</div>'
    if( $(".zzzclonedInput").length < 1){
        // create div
        $('#upload_zzz_sets').append(zzztoappend);
    }
    else {
        // clone div
        var zzzcloneIndex = $(".zzzclonedInput").length + 1;
        var zzznew_Input = $(this).closest('.zzzclonedInput').length ? $(this).closest('.zzzclonedInput').clone() : $(".zzzclonedInput:last").clone();
        zzz_updateClonedInput(zzzcloneIndex, zzznew_Input,true); 
    }   
});

$(document).on("click", ".zzzremove", function(e){
    e.preventDefault();
    $(this).parents(".zzzclonedInput").remove();
    $(".zzzclonedInput").each( function (zzzcloneIndex, zzzclonedElement) {
        zzz_updateClonedInput(zzzcloneIndex + 1, zzzclonedElement,false);
    })
});

jQuery(document).ready(function($){
    $(document).on("click", ".zzz-upload-button", function(e){
        e.preventDefault();
        upload_image($(this));
        return false; 
    });
});

function upload_image(el){
    var $ = jQuery;
    var custom_uploader;
    var button = $(el);
    var id = button.attr('id').replace('_zzzbutton', '');
    if (custom_uploader) {
        custom_uploader.open();
        return;
    }
    //Extend the wp.media object
    custom_uploader = wp.media.frames.file_frame = wp.media({
        title: 'Add Image',
        button: { text: 'Add Image' },
        multiple: false
    });
    //When a file is selected, grab the URL and set it as the text field's value
    custom_uploader.on('select', function() {
        attachment = custom_uploader.state().get('selection').first().toJSON();
        $('#'+id).val(attachment.url);
        $('#'+id).prev().attr('src', attachment.url);
        //console.log(attachment);
        console.log(id);
        //custom_uploader.close();
    });
    //Open the uploader dialog
    custom_uploader.open();
}

}); 

UPDATE 2b:

I've also managed to display the right amount of fields, it just doesn't add the value. Here's my new code

function tl_hero_image_option_callback() {
$hero_options = get_option( 'hero_options' ); 


foreach ($hero_options as $key => $value) {
if (strpos($key, '_zzz_')) {
    $html = '<div id="upload_zzz_sets">';

    if( isset( $hero_options['upload_zzz_link_1'] ) && $hero_options[ 'upload_zzz_link_1' ] ) { 
        $html .= '<div id="zzzclonedInput'.$i.'" class="zzzclonedInput">';
        $html .= '<input id="cs_product_menu_zzz_src_'.$i.'" type="text" size="36" name="hero_options[upload_zzz_link_'.$i.']" value="' . $hero_options['upload_zzz_link_'.$i.''] . '" /> <input id="cs_product_menu_zzz_src_'.$i.'_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button"  /> <div class="button zzzremove">-</div>';
        $html .= '</div>';
    }

    $html .= '</div>';

    echo $html;
}

} 


}

Answer 1

try:

function yyy_hero_image_option_callback() {

  $hero_options = get_option( 'hero_options' ); 
  $i=1;
  $html = '<div id="upload_zzz_sets">';

  foreach($hero_options as $key => $values){
    if (strpos($key, 'zzz')) { 
        $html .= '<div id="zzzclonedInput'.$i.'" class="zzzclonedInput">';
    $html .= '<input id="cs_product_menu_zzz_src_'.$i.'" type="text" size="36" name="hero_options[upload_zzz_link_'.$i.']" value="' . $values . '" /> <input id="cs_product_menu_zzz_src_'.$i.'_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button"  /> <div class="button zzzremove">-</div>';
    $html .= '</div>';
     $i++;

    }


  }

  $html .= '</div><div class="button zzzclone">Add an Image</div>';

  echo $html; 
}

Answer 2

The way you changed your code, $i is not set anymore, try this :

foreach ($hero_options as $key => $value) {
    if (strpos($key, '_zzz_')) {
        $i = substr($key, -1); // This will retrieve the last char of $key, which is corresponding to your previous $i
        $html = '<div id="upload_zzz_sets">';
        $html .= '<div id="zzzclonedInput'.$i.'" class="zzzclonedInput">';
        $html .= '<input id="cs_product_menu_zzz_src_'.$i.'" type="text" size="36" name="' . $value . '" value="' . $value . '" /> <input id="cs_product_menu_zzz_src_'.$i.'_zzzbutton" type="button" value="Add / Change" class="button-secondary zzz-upload-button"  /> <div class="button zzzremove">-</div>';
        $html .= '</div>';
        $html .= '</div>';
        echo $html;
    }
} 

I also replaced the $hero_options[key] parts by $value, since you already get it from the foreach.