increment id for dynamically generated div - php

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>';