JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<table class="table" id="product-table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th class="text-center">Price</th>
            <th class="text-center">Total</th>
            <th class="text-right">Remove</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row-item">
            <td class="col-sm-8 col-md-6">
                <div class="media">
                    <div class="media-body">
                        	<h4 class="media-heading">Product 1</h4>

                        	<h5 class="media-heading"> Part Number: P100</h5>
	<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>

                    </div>
                </div>
            </td>
            <td class="col-sm-1 col-md-1" style="text-align: center">
                <input type="text" class="form-control quantity" id="123456" name="product1" value="5">
                <input type="hidden" name="123456" value="123456">
            </td>
            <td class="col-sm-1 col-md-1 text-center"><strong>10</strong>

            </td>
            <td class="col-sm-1 col-md-1 text-center"><strong class="total">50.00</strong>

            </td>
            <td class="col-sm-1 col-md-1 remove">
                <button class="btn btn-sm btn-danger btn-remove" id="remove0" name="removeItem">Delete</button>
            </td>
        </tr>
        <tr class="row-item">
            <td class="col-sm-8 col-md-6">
                <div class="media">
                    <div class="media-body">
                        	<h4 class="media-heading">Product 2</h4>

                        	<h5 class="media-heading"> Part Number: P200</h5>
	<span>Status: </span><span class="text-success"><strong>In Stock</strong></span>

                    </div>
                </div>
            </td>
            <td class="col-sm-1 col-md-1"...

JavaScript

$(document).ready(function () {
    
    $('#product-table').on( 'click', '.btn-remove', function( event ) {
        var $tr = $(this).closest('tr');
        $tr.find('.quantity').val( '0' );
        $tr.find('.total').text( '0.00' );
        // Submit your form here
    });
});