increment id for dynamically generated div

Solution:1

$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;
}

Solution:2

Below is a complete working solution.

HTML:

<div id="addresses">
    <div class="address" id="address0">
       <div class="street">
           <input type="text" name="street[]" />
       </div>
       <div class="city">
           <input type="text" name="city[]" />
       </div>
       <div class="addmoreadd">
          <button type="button" class="addmore">Add More Address</button>
       </div>
    </div>
</div>

Javascript:

var rowNum = 0;

$("body").on("click", ".addmore", function() {
      rowNum++;
      var $address = $(this).parents('.address');
      var nextHtml = $address.clone();
      nextHtml.attr('id', 'address' + rowNum);
      var hasRmBtn = $('.rmbtn', nextHtml).length > 0;
    if (!hasRmBtn) {
      var rm = "<button type='button' class='rmbtn'>Remove</button>"
      $('.addmoreadd', nextHtml).append(rm);
    }
      $address.after(nextHtml); 
 });

$("body").on("click", ".rmbtn", function() {
    $(this).parents('.address').remove();
});