HTML Schema - combining multiple spans - html

Question

I have searched stackoverflow and the web and I can't find an direct answer to this question.
On my website I have added the schema information for the price of an item (see below)
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
Adults and over 10 years old Presale– <span itemprop="price" content="10.00">
<span itemprop="priceCurrency" content="USD">
<span itemprop="availability">
<span itemprop="availabilityStarts" content="2017-01-01T00:00">
<span itemprop="availabilityEnds" content="2017-03-17T23:00">
<span itemprop="inventoryLevel" content="10000">
<span itemprop="url" content="http://www.website.com">
$10</span></span></span></span></span></span></span>
</span>
So as you can see, I have a TON of <span > code. I want to try and reduce this.
I have tested the validation of this snippet via W3C and it validated just fine.
What I am curious about is A) is there a better way, and B) can I just reduce to 1 <span> and include all of that in one so it would look like this:
<span itemprop="priceCurrency" content="USD">
<span itemprop="availability" itemprop="availabilityStarts" content="2017-01-01T00:00" itemprop="availabilityEnds" content="2017-03-17T23:00" itemprop="inventoryLevel" content="10000" itemprop="url" content="http://www.website.com">
Or am I trying to cram too much in one area?

Answer 1

In principle, what you did is fine. However, you currently list the itemprop and content attributes many times on this single <span> element. This is invalid HTML.
Instead, I recommend using data-* attributes.
<span data-price="10.00"
data-price-currency="USD"
data-availability="true"
data-availability-starts="2017-01-01T00:00"
data-availability-ends="2017-03-17T23:00"
data-inventory-level="10000"
data-url="http://www.example.com"></span>
Further reading: using data attributes.