I want to find discount amount or percentage, both are working fine but I can't do a little adjustment to it 

I want that if I input 10% of 0 or null, the total should show 0. Currently it will show 10.   

Also it updates value in the second calculation as well I want on row only

```js
  $(document).on('change', '.amountOrPercent', function() {
  var amountOrPercent = $(this).find(":selected").val();
  if (amountOrPercent == 'amount') {
    $(this).closest('.divForCalculation').find('.extraForPercentage').remove();
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '4px');
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '1');
  } else if (amountOrPercent == 'percentage') {
    $(this).closest('.divForCalculation').find('.divForCalculation').css('flex', '2');
    $(this).closest('.divForCalculation').find('.amountOrPercent').css('padding', '0');
    $(this).closest('.divForCalculation').append('<div class="extraForPercentage" style="flex: 1"><span class="mr-2 px-3 pt-2">Of</span><div style="display: inline;"><input type="text" class="form-control totalof" placeholder="0" required style="display: inline; width: 60%;" value=""></div></div>');
  }
});

$(document).on("change keyup keypress", ".discountAmount, .totalof", function() {
  var discountAmount = 0;
  var discountPercentage = 0;
  var totalof=0;
  var result=0;
  discountAmount = $(".discountAmount").val();
  totalof=$(".totalof").val();
  if(totalof==null || totalof==0){
  totalof=0;
  result=-discountAmount;
  }
else
    {  
    result = -parseFloat((parseInt(totalof)/100*parseInt(discountAmount)));
}
    $('.invoiceItemAmount').val(result);
});
```

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mr-2 divForCalculation" style="display: flex" >
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total<label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">

<hr>

<div class="mr-2 divForCalculation" style="display: flex" >
  <div class="calculation-container">
    <div class="mr-2" style="flex: 1">
      <div class="input-group my-group">
        <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
        <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
          <option value="amount">$</option>
          <option value="percentage">%</option>
        </select>
      </div>
    </div>
  </div>
</div>
<br>
<label>Total<label>
<input type="text" class="invoiceItemAmount" Placeholder="0" value="">
```

---

\*\*Origianl HTML Structure\*\*

```
<div class="inv-table-body">
  <div class="body-row row m-0">
    <div class="px-2 col-3">
      <select name="invoice_type" class="form-control invoiceType" required>
        <option value="newitem">New Item</option>
        <option value="presetitem">Preset Item</option>
        <option value="discount">Discount</option>
        <option value="subsidy">Subsidy</option>
      </select>
    </div>
    <div class="px-2 col-6 item-description" style="display: flex;">
      <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">
    </div>
    <div class="px-2 col-2">
      <input type="number" class="form-control invoiceItemAmount" name="amount[]" placeholder="0" value="" required>
    </div>
    <div class="col-1 del-icon-container"><i class="fas fa-trash"></i></div>
  </div>
</div>

```

**Appending with**

```
$(document).on('change', '.invoiceType', function() {
let $field = $(this);
let invoiceType = $field.val(); // :selected not needed

if (invoiceType === 'newitem') {
    $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`);
} else if (invoiceType === 'presetitem') {
    $field.closest('.body-row').find('.item-description').html(`<input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 1">`);
} else if (invoiceType === 'discount') {
    $field.closest('.body-row').find('.item-description').html(`<div class="mr-2 divForCalculation" style="flex: 1">
        <div style="display: flex" class="calculation-container">
            <div class="mr-2" style="flex: 1">
                <div class="input-group my-group">
                    <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
                    <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
                        <option value="amount">$</option>
                        <option value="percentage">%</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 2">
    `);
} else if (invoiceType === 'subsidy') {
    $field.closest('.body-row').find('.item-description').html(`<div class="mr-2 divForCalculation" style="flex: 1">
        <div style="display: flex" class="calculation-container">
            <div class="mr-2" style="flex: 1">
                <div class="input-group my-group">
                    <input type="text" class="form-control discountAmount" name="snpid" placeholder="0">
                    <select id="lunch" class="form-control amountOrPercent" style="padding: 4px;">
                        <option value="amount">$</option>
                        <option value="percentage">%</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" name="description[]" placeholder="Add Invoice Description" required style="flex: 2">
    `);
}
});

```