Marking up HTML code with microdata when there are multiple products on a page

Question

I have a page which compares 4 products at a time in parallel tabular form i.e. It mentions features of each of them one after another. Here is a sample page .

I wish to tag these features so that it becomes easier for search engines to interpret. However, in all the examples given here, you have to mention all the features of a product at a time in a div. This causes a problem for my case, where I mention the features of product together.

A typical example as given goes like this :-

<div itemscope itemtype="http://schema.org/Offer">
  <span itemprop="name">Blend-O-Matic</span>
  <span itemprop="price">$19.95</span>
</div>

However, I would like it to be in this way :-

<div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="name">Blend-O-Matic</span> // Item 1
    </div>
   <div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="name">Blend-O-Matic2</span> // Item 2
    </div>

Further followed by :-

 <div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="price">$19.95</span> // Item 1
    </div>
   <div itemscope itemtype="http://schema.org/Offer">
      <span itemprop="price">$21.95</span> // Item 2
    </div>

So, in nutshell, is there a way so that I can tag an item with some code and then use it to refer to other details of that item ?

Please comment if I am unclear in asking my doubt !

Answer 1

Use itemref:

<div itemscope itemtype="http://schema.org/Offer" itemref="item1_price">
    <span itemprop="name">Blend-O-Matic</span>
</div>

<div id="item1_price">
    <span itemprop="price">$19.95</span>
</div>

See results from Google Structured Data Testing Tool here