Schema.org: Separate Product or ItemList Products?

This started to be a little be more of a challenge one night more then I thought. The issue was that I need to have position in my list of products. Which were in a ItemList when I used the itemtype in the same div I didn't have the option to add position; a requirement for ItemListElement. This all came from about because I was simplifying my list of products by just displaying them on a single page with prices. I wanted to put them list however looking back after a long night I could have easily just listed them as separate Product types.

So to summarize the issue I wanted to meet all the requirements from Google's Structured Data Tool and didn't think listing them as multiple Products was right and instead did them as ItemList. Not to be confused with ListItem which is a type that can be at the root but also under ItemListElement. Its all very confusing at first glance.

The next question I asked... Is it okay to have more than one Product

Example: (this doesn't have position or url property) 

<div class='results' itemscope itemtype="http://schema.org/ItemList">
    <meta itemprop="itemListOrder" content="Descending" />
    <strong itemprop="name">2 Items</strong>
    <div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
        <h3 itemprop="name">Item 1 Title</h3>
        <img itemprop='image' src="bmw1.jpg" alt='Item 1 Description' />
        <span class='description' itemprop="description">
            Item 1 description of the item.  Includes some basic comparison details.
        </span>
        <div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">$45,500.00</span>
            <link itemprop="availability" href="http://schema.org/InStock"/>
        </div>
    </div>
    <div class='item' itemprop="itemListElement" itemscope itemtype="http://schema.org/Product">
        <h3 itemprop="name">Item 2 Title</h3>
        <img itemprop='image' src="bmw2.jpg" alt='Item 2 Description' />
        <span class='description' itemprop="description">
            Item 2 description of the item.  Includes some basic comparison details.
        </span>
        <div class='pricing' itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <span itemprop="price">$44,550.00</span>
            <link itemprop="availability" href="http://schema.org/InStock"/>
        </div>
    </div>
</div>

Now in my solution I break it up by using both ItemList and ListItem inside the ItemListElement referenced earlier! However I will note that you can write all this in separate Product types but why would you mess with that awesome look within the Data Structure Tool at the end!? Just joking...

My Solution

<ol itemscope itemtype="http://schema.org/ItemList">
   <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <div class="media" itemprop="item" itemscope="" itemtype="http://schema.org/Product">
         <div class="media-left">
            <a href="#">
            <img itemprop="image" class="media-object" width="125" src="/images/amsoil/API.jpg" alt="P.i. Performance Improver Gasoline Additive">
            </a>
         </div>
         <meta itemprop="sku" content="APICN-EA">
         <div class="media-body">
            <a itemprop="url" href="/Products/Amsoil/APICN-EA">
               <h4 itemprop="name" class="media-heading">P.i. Performance Improver Gasoline Additive</h4>
            </a>
            <br>
            <div itemprop="offers" itemtype="http://schema.org/Offer" itemscope="">
               <h1 style="line-height: 0;">
                  <span itemprop="price">$13.85</span>
               </h1>
               <sub>Price (USD)</sub>
               <meta itemprop="priceCurrency" content="USD">
               <meta itemprop="availability" content="https://schema.org/InStock">
            </div>
            <br>
            <ul class="nav nav-tabs">
               <li class="nav-item active">
                  <a class="nav-link active" data-toggle="tab" href="#home">Description</a>
               </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
               <div class="tab-pane active container" id="home">
                  <p itemprop="description">
                     P.i. improves fuel mileage an average of 2.3% and up to 5.7%. Reduces emissions such as hydrocarbons (HC) up to 15%, carbon monoxide (CO) up to 26% and nitrous oxides (NOx) up to 17%. Restores power and performance. Reduces the need for costly higher octane fuel. (API)
                  </p>
               </div>
            </div>
         </div>
      </div>
   </li>
</ol>

Errors to look for.. "Error in Google SDTT: “All values provided for url must point to the same page.”  my issue came up because I had a space before the value, which cause the last record in the list to not count toward the requirement. 

Notes for Later
I did notice that SomeProducts was an option but went with a list instead. Also as a final note I don't know if the price allows $ character but I left it and didn't see any errors.