check condition to extract value from html response in jmeter - jmeter

Question

I'm new in JMeter, I'm working on one project on JMeter. where i have to extract value from HTML response depend on condition.
Actual data:
<li class="size size-item 159103">
<button id="productSizesAndGrid-btn-size-1" class="btn selection-button lowStock" data-skucode="159103" data-size="XS 8/10 " data-in-wishlist="false" data-stock-status-name="Low stock"> XS 8/10 </button>
</li>
I want to extract data-code but if data-stock="In stock".
data-stock can be out of stock as well so if data In Stock then and then only i want to extract that value.
I understand simple value extraction using regular expression extractor but couldn't understand how to do this.
when i working with this i realised there are disable data with same attribute and class
<li class="size size-item 159108">
<button id="productSizesAndGrid-btn-size-1" class="btn selection-button outOfStock disabled" data-skucode="159108" data-size="XS 8/10 " data-in-wishlist="false" data-stock-status-name="Out of stock"> XS 8/10 </button>
</li>
Edit:
I tried using below answer : it's not working in my case
Regular Expression : <button id="btnid" class="btn inStock" data-code="(.*?)"(.*?)data-stock="In stock">
Select the first template $1$
Using css selector:
#btnid
this works in my case now problem is i got two elements because both ids are same how to get specific element; i want second one as first one is disabled.
<button id="product-1" class="btn outOfStock disabled" data-code="123456" wishlist="false" data-stock="Out of stock" style="" css="1"></button>
<button id="product-1" class="btn inStock" data-code="123123" data-size="XS 8/10 " wishlist="false" data-stock="Low stock" style="" css="2"></button>
It works if you add 2 in Match No: 2
but i don't know it's correct way or not!
by above solution i still didn't get actual elements which are in stock if i get that then my problem solved but i have only temporary solution; i will appreciate if anyone can show me right way to do it.
Answer: below accepted answer work for me:
Match count: 13
Match[1]=
Match[2]=159109
Match[3]=159110
Match[4]=159111
Match[5]=159112
Match[6]=159103
Match[7]=159104
Match[8]=159105
Match[9]=159106
Match[10]=159107
Match[11]=
Match[12]=
Match[13]=

Answer 1

Don't use regular expressions for parsing HTML, they're hard to develop and maintain, moreover they're fragile and sensitive to markup changes.
I would recommend going for CSS Selector Extractor, the relevant CSS selector to match <button> tags where data-stock attribute is not Out of stock would be something like:
button:not([data-stock=Out of stock])
You need the data-code attribute
Demo:

Answer 2

To achieve this follow below steps:
Add Regular Expression Extractor as a child of the Sampler returning the Response
Regular Expression extractor setting as below:
Regular Expression : <button id="btnid" class="btn inStock" data-code="(.*?)"(.*?)data-stock="In stock">
Select the first template $1$
Proof of it working
Afterwards you can use ${dataCode} anywhere in the script.