increment id for dynamically generated div

Question

I want to dynamically generate video player container divs that will have a unique id. The elements are generated through Visual Composer in WordPress and the final html should look something like this:

<div style="width: 100%; display: inline-block; position: relative;">
<div style="margin-top: '. $custom_margin .'"></div>
<div id="player_1" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
    </div> 
<div style="width: 100%; display: inline-block; position: relative;">
<div style="margin-top: '. $custom_margin .'"></div>
<div id="player_2" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
    </div>
<div style="width: 100%; display: inline-block; position: relative;">
<div style="margin-top: '. $custom_margin .'"></div>
<div id="player_3" style="position:absolute;top:0;left:0;right:0;bottom:0"></div>
</div>

The user should be able to add as many div elements with unique ids as he likes. This is how my php looks right now: EDIT: The function is called for every single video container

public function vc_custvideo_html($atts){

        extract(
            shortcode_atts(
                array(
                    'custom_width' => '',
                    'custom_height' => '',
                    ),
                    $atts
                )
            );
        $percent = $custom_height / $custom_width;
        $custom_margin = number_format( $percent * 100, 2 ) . '%';
        $html = '';
        $html.= '<div style="width: 100%; display: inline-block; position: relative;">';
        $html.= '<div style="margin-top: '. $custom_margin .'"></div>';
        $html.= '<div id="player_"  style="position:absolute;top:0;left:0;right:0;bottom:0"></div>';
        $html.= '</div>';
        return $html;
    }

I can understand that i have to use a foreach loop to generate the unique ids but i'm really new at php and I need help.

Answer 1

Something like that

$i = 0;
foreach ($playerInstance as $k => $currPlayer {
   vc_custvideo_html($currPlayer, $i)
   $i++;
}
public function vc_custvideo_html($atts, $index){

    extract(
        shortcode_atts(
            array(
                'custom_width' => '',
                'custom_height' => '',
                ),
                $atts
            )
        );
    $percent = $custom_height / $custom_width;
    $custom_margin = number_format( $percent * 100, 2 ) . '%';
    $html = '';
    $html.= '<div style="width: 100%; display: inline-block; position: relative;">';
    $html.= '<div style="margin-top: '. $custom_margin .'"></div>';
    $html.= '<div id="player_'.$index.'"  style="position:absolute;top:0;left:0;right:0;bottom:0"></div>';
    $html.= '</div>';
    return $html;
}

Or with a for loop maybe

Answer 2

Assuming the function is called once per Video, use an outer foreach and a counter:

$counter=1;
foreach($arrayOfVideos as $video){
  $this->vc_custvideo_html($video, $counter);
  $counter++;
}

And inside your function, just use the $counter variable:

// [...]
$html.= '<div style="margin-top: '. $custom_margin .'"></div>';
$html.= '<div id="player_"' . $counter . ' style="position:absolute;top:0;left:0;right:0;bottom:0"></div>';
$html.= '</div>';