jQuery - add unique name to radio buttons
===

I have a jQuery script that will grab some html and repeat it with each time "add product" is clicked. I got this to work seemingly well, but I realized that multiple products (the same product) can be added. Thus, the radio buttons interfere. They would need unique radio name attributes. I don't even know where to start by doing this, I suppose I could have a counter and add it to the current name... Thanks in advance for any help. 

Here is an example of the html:

    <div id="product-container" class="product-container" style="display:none">
    <div class="product-wrapper white-rounded">
        <div id="product-name" style="display:none"></div>
            <h4>Example Product 1</h4>
            <span class="align-right">
                <input name="select2" type="radio"><strong style="margin-right:20px">Option 1</strong>
                <input name="select2" type="radio"><strong>Option 2</strong>
            </span>
            <div class="remove float-right">
               <a href="#"><div class="img-remove"></div>Remove</a>
            </div>
            <div class="clear"></div>
							
       </div>
    </div>
And, here is the jQuery that grabs the code and spits it out at an anchor point:

    $('.add-product').click(function() {
			if (Products < 4 || (Products == 4 && Products2 == 1)) {
			//Store html contents in Variable
				var thisProduct = $('#product-container').html()
			//Add account html to account center anchor point
				$('.add-product').before(thisProduct)
				$('#product-name').text(productName)
			//Add one more Product Count
				Products++
			//Add Product Count value to hidden Input Field, then manually trigger the change event.
				$('.product-count').val(Products).change()
			//Scroll to top of page after account is added
				$('html, body').animate({scrollTop:0}, 'slow');
			}

			else {
				alert('HALP!');
			}
		});
