Web Scraping Button Information

I'm trying to scrape information from inside the <button data-availability-id="8W1VZ0Q60RBW" .......> tag, assuming I can locate it with a known data-availability-id. I need the value of data-title and data-button-title, meaning the title of the laptop and the current configuration, all from inside the same button tag. How do I get this using BeautifulSoup?

url = https://www.microsoft.com/en-ca/p/huawei-matebook-x-pro-laptop/8n4k86d4j006/4X0P?activetab=pivot:overviewtab

<button data-m="{&quot;cN&quot;:&quot;Sku&quot;,&quot;pid&quot;:&quot;8N4K86D4J006/HB3R/8W1VZ0Q60RBW&quot;,&quot;id&quot;:&quot;nn1c27c1c3c1m1r2a2&quot;,&quot;sN&quot;:1,&quot;aN&quot;:&quot;c27c1c3c1m1r2a2&quot;}" class="c-select-button cli_sku-select-button" name="sku" aria-pressed="false" data-js-selected-text="Intel i5, 256GB SSD Selected" data-js-unselected-text="Intel i5, 256GB SSD Not selected" data-bundleonly="false" data-comingsoon="false" data-notavailable="false" data-sku-id="HB3R" data-availability-id="8W1VZ0Q60RBW" data-title="Huawei Matebook X Pro 53010CBS Laptop" data-button-title="Intel i5, 256GB SSD" data-purchasable="true" data-repurchasable="true" data-trial="false" data-delivery-overlay="" data-inventory-sku-id="QF9-01635" data-inventoried="true" data-usecart="true" data-purchase-method="cart" data-device-serial-number="" data-preorder="false" data-preorder-release-date="" data-cta-display-type="Default" data-max-order-quantity="" data-imageuri="https://img-prod-cms-rt-microsoft-com.akamaized.net/cms/api/am/imageFileData/RE267fU?ver=0ea4&amp;m=6&amp;w=72&amp;h=72&amp;n=t&amp;q=60&amp;o=f&amp;l=t&amp;b=white" data-imagealtext="No Data Available" data-show-findinstore="true" data-in-stock="" data-list-price="1349.1" data-rt-price="1499" data-formatted-list-price="CAD $1,349.10" data-bi-dnt="" data-bi-mto="" aria-checked="false">
                Intel i5, 256GB SSD 
                <span class="cli_sku_price_acc x-hidden" aria-hidden="false">CAD $1,349.10</span>