JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div id="repurchase">
    <div class="lblHead">REPURCHASE REQUEST</div>
    <div class="form-group">1.
        <input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk11" value="CashPlan" class="singlecheckbox plan" />
        <label for="fm3chk11">Cash Plan</label>
        <input type="checkbox" name="Fm3CheckBoxList1[]" id="fm3chk12" value="EPFPlan" class="singlecheckbox plan" />
        <label for="fm3chk12">EPF Plan</label>
    </div>
    <div class="form-group">
        <div class="col-lg-6">
            <label>Fund Name</label>
            <select id="fundId" class="form-control drplst units" AppendDataBoundItems="true">
                <option Value=""></option>
                <option Value="123">123</option>
                <option Value="369">369</option>
            </select>
        </div>
        <div class="col-lg-6">
            <div class="clearfix"></div>
            <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk21" value="No_OfUnitToRedeem" class="singlecheckbox" />
            <label for="fm3chk21">No. of Unit to Redeem</label>
            <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk22" value="Amount_ToRedeem" class="singlecheckbox" />
            <label for="fm3chk22">Amount to Redeem</label>
            <input type="checkbox" name="Fm3CheckBoxList2[]" id="fm3chk23" value="All_Units" class="singlecheckbox" />
            <label for="fm3chk23">All Units</label>
            <asp:TextBox ID="Fm3TextBox2" runat="server" class="form-control" placeholder="AMOUNT"></asp:TextBox>
        </div>
        <div class="clearfix"></div>
    </div>
</div>

JavaScript

$('.units').change(function () {
    alert($(this).closest('.form-group').prev().find('.singlecheckbox:checked').attr('id'));
    alert($(this).parent().next().find('.singlecheckbox:checked').attr('id'));

});