title: Loading a php snippet on a modal with an ajax call and posting from the form causing to call it multiple times
body: <p>In a form I have a modal skeleton--meaning the modal body is empty. I designed number of on the fly add(for dropdowns) form and loading with a ajax post call like</p>
  
  <pre><code>    var scriptname,initiator;
      $(".launch-add-form").click(function(e){
           scriptname=($(this).prop('id')).split("-")[0] ;
           initiator=$(this).prop('id');
           $.ajax({
              type:"post",
              url:"&lt;?=site_url()?&gt;/admin/commoncontroller/getform/",
              data:{csrftoken:cct,scriptname:scriptname}          
           }).done(function(res){ $("#modalBody").html(res) ;})       
  
      });
  </code></pre>
  
  <p>Which returns any script that matches the script name and render the response to the modal body. Well now from modal i fill the form and save it which properly works but the problem is on the main form there are multiple drop-downs and each have </p>
  
  <pre><code>      .launch-add-form class
  </code></pre>
  
  <p>Well, if I save with one drop down and try to do with other, then the ajax save call is being called like in geometric progression...1st 1 call than 2 calls then 4 calls...</p>
  
  <p>Can anyone help please?</p>