title: How to add Ajax response to div in html
body: <p>How to append Ajax response to div in HTML</p>
  
  <p>This is my ajax Code</p>
  
  <pre><code>$(document).ready(function(){
      $('.credit,.debit').change(function(){
          var value=$(this).val();
          $.ajax({
              type:"POST",
              url:"&lt;?php echo base_url();&gt;index.php/Transactions/getamountbyid",
              data:{id:value},
              success:function(result){
                  console.log(result);
                  $(".bal").html(result);
              }
          });
      });
  });
  </code></pre>
  
  <p>This is my controller Code</p>
  
  <pre><code>public function getamountbyid(){
      $id=$this-&gt;input-&gt;post('id');
      $this-&gt;Transaction_model-&gt;getamountbyid($id);
      print_r($data1);
  }
  </code></pre>
  
  <p>And THIS is my Ajax Response</p>
  
  <pre><code>Array ( [0] =&gt; stdClass Object ( [Accounts_id] =&gt; 1 [Accounts_number] =&gt; 123123123 [Account_Name] =&gt; Qualight [account_nickname] =&gt; Qualight [Address] =&gt; hyderabad [Mobile] =&gt; 9123912345 [account_type] =&gt; 1 [PAN_NO] =&gt; 1231231231 [GST_NO] =&gt; 123 [credit] =&gt; 20000.00 [debit] =&gt; [balance] =&gt; 20000.00 [Time_stamp] =&gt; 2020-02-13 18:51:49 ) )
  </code></pre>
  
  <p>I want to display account debit and credit balance after selecting the account from drop down it should be display below drop down can you please help me how to append required response data to required field or div</p>