title: how to call ajax function once for each radio click
body: <p>I made a custom drop down and given input type radio all is working fine but problem is. When i check a radio than sub list is attached to related radio div element than when i come back to check same radio again same thing happens. i want that don't happen means stop again calling of ajax for each radio.</p>
  
  <p>And keep in mind i have 4 level of sub categories</p>
  
  <p>call ajax once for each radio click\check. </p>
  
  <p>This is a first drop down code</p>
  
  <pre><code>               &lt;div class="col-md-6 col-sm-6"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="religion"&gt;project Categary&lt;/label&gt;&lt;br/&gt;
  
                          &lt;input type="button" class="form-control" id="relig" value="select Category"&gt;
  
                          &lt;div id="religions" style="display:none;padding-left:17px"&gt;
                              &lt;?php foreach($categories as $cat){ ?&gt;
                                  &lt;div id="&lt;?php echo $cat['code'] ?&gt;"&gt;
                                      &lt;label&gt;&lt;input type="radio" class="religions1" name="religion" id="religion" value="&lt;?php echo $cat['code'] ?&gt;"&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;?php echo $cat['Description'] ?&gt;&lt;/label&gt;&lt;br/&gt;
                                  &lt;/div&gt;  
                              &lt;?php } ?&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p>Getting the value of radio by this code</p>
  
  <pre><code>        $('#relig').click(function(){
              $('#religions').slideToggle("fast");
          });
  
          $(document).on('change','.religions1',function() {
              maincat = $(".religions1:checked").val();
              changeCategoryList(maincat);
          });
  </code></pre>
  
  <p>Ajax calling function</p>
  
  <pre><code> function changeCategoryList(maincategory){
      $.ajax({
         url: '&lt;?php echo site_url("trusts/getCategories"); ?&gt;',
         type: 'POST',
         data: { maincategory:maincategory },
         dataType: 'json',
         success: function(data) {
          $.each(data, function(key, value) {
                  var MoreTag='';
                  MoreTag += '&lt;div id="'+value.code+'" Style="padding-left:20px"&gt;';
                  MoreTag += '&lt;label &gt;&lt;input type="radio" class="religions1" name="religion" id="religion" value="'+value.code+'"&gt;&amp;nbsp;&amp;nbsp;'+value.Description+'&lt;/label&gt;&lt;br/&gt;';
                  MoreTag += '&lt;/div&gt;';
                  $("#"+maincategory).append(MoreTag);
              });
          }
      });
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/aS8RC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aS8RC.jpg" alt="When i check Skill development cub category is attached and when i click Health the primary health which is sub cat of health is attached, this is fine "></a></p>
  
  <p><a href="https://i.stack.imgur.com/rh7Bh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rh7Bh.jpg" alt="When again i click Skill development again once more time it is attaching the sub category this is happening for all radio."></a></p>