creating a function button using html widget

i currently have an add to cart button on the product page that works and its functional. I like to use the button in a html widget. I have tried to copy the code to the source input field area inside a new html widget am creating. The button is dependent  on model and other files to work properly. How can i create the button in html widget and it a functional button. right now the button is created  but it is not functional. I cant click on it and items are not being added to card.  see code below

<div class="row" style="margin-top: 100px;">
<div class="col-lg-12"><input class="btn btn-lg" style="background-color: #ff0000; color: white; width: 128px; height: 40px; border-radius: 20px; font-size: 10px; margin-left: 51%; margin-top: -115px;" type="button" value="RING ME UP" data-productid="@Model.ProductId" />
<div class="cartButton"><!--add-to-cart-button--> <button id="[email protected]" class="btn btn-default" style="margin-top: -66px; margin-left: 215px;" name="btn_addtocart" type="button" data-productid="@Model.ProductId"> @addToCartText </button></div>
</div>
</div>

Greetings,

Thank you for your reply!

Bear in mind that our HTML widgets do not execute any C# code, but only HTML (or JS if you change the type of the widget).

If you wish to include C# code, you may modify the appropriate .cshtml file instead.