title: How to auto change one input field value by changing another field value using JS
body: <p>There are two input fields <code>total_amount</code> &amp; <code>delivery_charge</code>.</p>
  <p><code>total_amount</code> field already have a value, now I want that when I input some value into <code>delivery_charge</code> field that will change the <code>total_amount</code> field's value.</p>
  <p>Suppose <code>total_amount</code> field's value is <code>200</code>.</p>
  <p>Now I input <code>20</code> into <code>delivery_charge</code> field and that will effect the <code>total_amount</code> field and the value will be <code>220</code>.</p>
  <p>For any type of changes of <code>delivery_charge</code> field it will change the value of <code>total_amount</code> field.</p>
  <p>But for myself it will not change perfectly.</p>
  <p>Suppose <code>total_amount</code> is <code>200</code></p>
  <p>when input <code>delivery_charge</code> = <code>2</code></p>
  <p><code>total_amount</code> = <code>202</code></p>
  <p>when input <code>delivery_charge</code> = <code>20</code></p>
  <p><code>total_amount</code> = <code>2020</code></p>
  <p>Here is my code detail</p>
  <p><strong>html</strong></p>
  <pre><code>&lt;h4&gt;Grand Total : &lt;input type=&quot;number&quot; id=&quot;total_amount&quot; readonly class=&quot;form-control total_amount&quot; value=&quot;0.00&quot;&gt;&lt;/h4&gt;
  
  &lt;input type=&quot;text&quot; name=&quot;delivery_charge&quot; id=&quot;delivery_charge&quot; class=&quot;form-control&quot;&gt;
  </code></pre>
  <p><strong>js</strong></p>
  <pre><code>$('#delivery_charge').keyup(function(event) {
              var total_amount = $('.total_amount').val();
              var delivery_charge = $(this).val();
              var grand_total_amount = total_amount + delivery_charge;
              $('.total_amount').val(grand_total_amount);
  });
  </code></pre>
  <p>Anybody help please? Thanks in advance.</p>