Vfrdtyky

var anchor = $('.anchor-link');

var section = $('.panels');

var count = 0;

if (anchor.length > count) {

	section.append('<div class= "circle"></div>');

	var circle = $('.circle');

	circle.each(function(e){

		count++;

		circle.append('<span></span>');

	})

}



var green = $('.circle > span');

circle.each(function(e){

	if ($(this).find('span').length > 0) {

		var indexSection = section.index(this);

		var indexSpan = green.index(this);

		if (indexSection == indexSpan){

			green.addClass('greens');

		}

	}

})

<section class="two-split panels">

	<div class="container">

		<div class="row">

			<div class="col col-2 left-col">

				<h4 class="heading grey">Our Strategic Model</h4>

				<h2 class="section-title green">Creating value...</h2>

				<p class="txt grey">UDG Healthcare is an international outsourcing services group focussed on the healthcare industry. The Group is organised and managed in three separate divisions, each focused on providing a specific area of specialist services to healthcare companies.</p>

				<img class="pic pic-left" src="./images/left-white.png" alt="Customers">

				<div class="row">

					<div class="col col-2 col-2-t small">

						<h4 class="small-heading grey">How we create value</h4>

						<p class="text small-text grey">Our strategy is to capitalise on an increasing trend by pharmaceutical, biotech and medtech companies to outsource non-core and specialist activities on an international basis. To achieve this we provide specialist skills and technical capabilities to clients across local and international markets.</p>

					</div>

					<div class="col col-2 col-2-t small">

						<h4 class="small-heading grey padded">What makes us different</h4>

						<p class="text small-text grey padded">We strive to create strong market offerings which can provide customers with a range of specialist capabilities within each of our areas of operation. We work in partnership with the manufacturer to create a bespoke solution to best address their objectives. We operate with a quality and governance framework which reflects the industry standards which allows clients to outsource with confidence.</p>

					</div>

				</div>

			</div>

			<div class="col col-2 right-col">

				<h2 class="section-title white">...Growing sustainably</h2>

				<p class="txt white">The strategy of the Group is to focus on maximising Shareholder value from  outsourced commercialisation services, by capitalising on its existing market leading positions as the demand for specialist outsourced services in the healthcare sector increases, driving higher levels of growth and profitability. We aim to drive growth through a combination of organic growth supplemented by strategic acquisitions, which will drive increasing returns on capital employed for the Group.</p>

				<img src="./images/right-green.png" alt="People" class="pic pic-right">

				<div class="row">

					<div class="col col-2 col-2-t small">

						<h4 class="small-heading white">People at the core</h4>

						<p class="text small-text white">Attracting and retaining talented leaders is essential for UDGHealthcare to sustain its growth model.</p>

					</div>

					<div class="col col-2 col-2-t small">

						<h4 class="small-heading white">Delivering value</h4>

						<p class="text small-text white">Successful delivery of our strategy will result in increased shareholder value through share price appreciation and dividends. Disciplined financial management and increased cash generation will allow for on-going re-investment in the business to sustain the growth model and capitalise on the opportunity to grow our services.</p>

					</div>

				</div>

			</div>

		</div>

		<div class="bottom-btn">

			<a href="javascript:;" class="download-link">

				<span class="s s-down-arrow btn-link">

					<span class="hide">download</span>

				</span>Download Strategic Model <span class="no-under">(PDF, 185KB)</span>

			</a>

			<a href="#" class="going-down anchor-link">

				<button type="button" class="down down-desktop">

					<img src="./images/down-green.png" alt="Move to the top content">

					<span class="s s-down-arrow btn-arrow">

						<span class="hide">Move Up</span>

					</span>

				</button>

			</a>

			<button type="button" class="down down-tablet">

				<img src="./images/down.png" alt="Move to the top content">

				<span class="s s-down-arrow btn-arrow">

					<span class="hide">Move Up</span>

				</span>

			</button>

		</div>

	</div>

</section>

$(document).ready(function(){

  $('section').each(function(idx,ele){

    let circles = ''; 

    for(let i = 0; i<6; i++){

      circles += '<div class= "circle"></div>';

    }

    $(ele).append(circles);

    

    $(ele).find('.circle').eq(idx).addClass('green');

  });

  

})

.circle{

 width:20px;

 height:20px;

 border-radius:100%;

 background-color:#ccc;

 margin:5px;

 display:inline-block;

}



.green{

 background-color:#ccee11 !important;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="two-split panels">

  <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>

</section>



<section class="two-split panels">

  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</div>

</section>



<section class="two-split panels">

  <div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>

</section>

<section class="two-split panels">

  <div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.</div>

</section>



<section class="two-split panels">

  <div>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.</div>

</section>



<section class="two-split panels">

  <div>Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy.</div>

</section>