JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bill1" class="bill hide withPadding">
    <h3>Bill 1</h3>
    <span>
        <label>Bill no</label>
        <input type="text" name="billNo" class="textField" id="BillNo" value="123" />
    </span>
    <span>
        <label>Bill total</label>
        <input type="text" name="billTotal" class="textField" id="BillTotal"/>
    </span>
    <span>
        <input type="button" name="addBillDetails" value="Add bill items" id="addBillDetails"/>
    </span>
</div>  

<div id="bill2" class="bill hide withPadding">
    <h3>Bill 2</h3>
    <span>
        <label>Bill no</label>
        <input type="text" name="billNo" class="textField" id="BillNo" value="456" />
    </span>
    <span>
        <label>Bill total</label>
        <input type="text" name="billTotal" class="textField" id="BillTotal"/>
    </span>
    <span>
        <input type="button" name="addBillDetails" value="Add bill items" id="addBillDetails"/>
    </span>
</div>

JavaScript

$("input#addBillDetails").live('click', function() {
    alert($('#BillNo', $(this).closest("div.bill")).val());
});