Hi there!
Looks like you are well on your way to getting your solution. Just wanted to jump in and post a solution on here in case others run into this in future as well.
One way to get different tab content on each product page is to the follow the steps in the doc (check for jQuery, add JS at the bottom, and add CSS) but instead of placing your HTML for the tabs directly in product.liquid in place of {{ product.description }}, you can place the code directly in the text editor of your product page by clicking on the show HTML button (<>).
The code in each product page would look something like this:
<ul class="tabs">
<li><a href="#tab-1">Info</a></li>
<li><a href="#tab-2">Ingredients</a></li>
<li><a href="#tab-3">What you will recieve</a></li>
<li><a href="#tab-4">Serving Suggestion</a></li>
<li><a href="#tab-5">Delivery</a></li>
</ul>
<div id="tab-1">
Unique Tab 1 Content Goes Here
</div>
<div id="tab-2">
Unique Tab 2 Content Goes Here
</div>
<div id="tab-3">
Unique Tab 3 Content Goes Here
</div>
<div id="tab-4">
Unique Tab 4 Content Goes Here
</div>
<div id="tab-5">
Unique Tab 5 Content Goes Here
</div>
The only limitation is that you cannot use liquid tags in the product description text editor.
All the best!
Justin
