How can we get divs in the html field to get unique id’s when adding more fields like this with the repeater functionality.Div contains form fields like drop-down,text-field, which should also be replicated in the new div. Below written code is an example.

<?php
/*
Title: Roove example
Post Type: post
*/

piklist('field', array(
	'type'    => 'group'
	,'field'   => 'rooves'
	,'label' => __('Seperate roove', 'wpk-solquote')
	,'columns' => '12'
	,'add_more' => TRUE
	,'fields'  => array(
		array(
			'type' => 'text'
			,'field' => 'roove_name'
			,'label' => __('Building name', 'wpk-solquote')
			,'columns' => '10'
			,'attributes' => array(
				'class' => 'text',
		)),
		array(
			'type'    => 'group'
			,'field'   => 'size'
			,'columns' => '12'
			,'fields'  => array(
				
				array(
					'type' => 'text'
					,'field' => 'roove_height'
					,'label' => __('Roove height (cm)', 'wpk-solquote')
					,'columns' => '5'
					,'attributes' => array(
						'class' => 'roofheight'
					)
					
				),
				
				array(
					'type' => 'text'
					,'field' => 'roove_width'
					,'label' => __('Roove width (cm)', 'wpk-solquote')
					,'columns' => '5'
					,'attributes' => array(
						'class' => 'roofwidth'
					)
				)
			)
		),
		array(
			'type'    => 'html'
			,'field'   => 'buttons'
			,'columns' => '12'
			,'value' => '
			<div class="roofWrapper" style="overflow: scroll; position: relative; text-align: center; max-width:850px; height: 600px;">
			<div class="canvasWrapper" style="position: relative; display: inline-block; margin-left: auto; margin-right: auto; padding-top: 19px; padding-left: 19px; width: 381px;">
			<div class="ruler vRule" style="width: 18px; height: 419px;"></div>
			<div class="ruler hRule" style="height: 18px;"></div>
			<canvas id="c" width="600" height="400" style="border:1px solid black;float:left;" ></canvas>
			</div>
			</div>
			</div>
			'
			)
			)));
			?>