title: Targetting specific appended divs using jQuery
body: <p>I have set up a page which lets you enter information about your child. You can add another form and take away another form for the amount of children you wish to enter information about.</p>
  
  <p>However my problem is that I have a button which you can tick and it will hide certain forms and change certain labels. I do this using jQuery. However when I click the button it does it for all the different child information sections and not just the child information section in which I click.</p>
  
  <p>I have tried many ways to do this by using <code>.parent()</code> <code>.parents()</code> <code>.children()</code> <code>.siblings()</code> <code>.find()</code>. I have also tried targetting the divs and using <code>this</code>. However none of this works. </p>
  
  <p>The problem is that I append another set of forms every time someone clicks "add child". But all the id's and classes stay the same. I think the problem is because I have the same ID's but then I have tried ways to make unique id's every time it is appended by using a variable which adds a number new number to the ID depending on how many forms there are. This didn't work and I got really confused. </p>
  
  <p>Is there a way which I can target the form in which they click the button in so it only makes changes to that form? </p>
  
  <p>Here is my jQuery which I am using:</p>
  
  <pre><code> $j = $.noConflict();
      var id_count = 0;
      var id_sub = 1;
      var htmlcode = "&lt;div class='fieldset fieldsetAdditional' &gt; &lt;h2 class='legend'&gt;Child Information&lt;/h2&gt;&lt;span id='removechild' class='btn-removechild' style='float:right;'&gt;&lt;div class='removeChildButton'&gt;&lt;i class='icon-white icon-sub'&gt;&lt;/i&gt;&lt;/div&gt;&lt;p&gt;Remove Child&lt;/p&gt;&lt;/span&gt; &lt;ul class='form-lists form-list'&gt;&lt;li class='born'&gt; &lt;div class='full-tbl'&gt; &lt;div class='born-field dob-field'&gt; &lt;input class='checkbox check-input hidden' name='is_born' id='born' type='checkbox'&gt; &lt;label class='check' for='born'&gt;Is Your Child Born Yet?&lt;/label&gt; &lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class='childname'&gt; &lt;div class='childname-field'&gt; &lt;label for='childname'&gt; Your Child's Name &lt;/label&gt; &lt;div class='input-box'&gt; &lt;input type='text' id='childname' title='First Name' maxlength='225' class='input-text'&gt; &lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class='gender'&gt; &lt;div class='gender-field'&gt; &lt;label for='gender' class='required'&gt; &lt;em&gt;*&lt;/em&gt; Your Child's Gender &lt;/label&gt; &lt;div class='input-box'&gt; &lt;select name='gender' class='validate-select input-select' title='gender'&gt; &lt;option disabled='disabled' selected='selected'&gt;Select an option&lt;/option&gt; &lt;option&gt;Boy&lt;/option&gt; &lt;option&gt;Girl&lt;/option&gt; &lt;/select&gt; &lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class='dob'&gt; &lt;div class='dob-fields'&gt; &lt;label for='dob' class='required'&gt; &lt;em&gt;*&lt;/em&gt; Date Of Birth &lt;/label&gt;&lt;br/&gt; &lt;div class='dob-month input-box dob-field'&gt; &lt;select id='dob-month' name='month' class='validate-select input-select' title='month'&gt; &lt;option disabled='disabled' selected='selected'&gt;Select an option&lt;/option&gt; &lt;option value='01'&gt;January&lt;/option&gt; &lt;option value='02'&gt;February&lt;/option&gt; &lt;option value='03'&gt;March&lt;/option&gt; &lt;option value='04'&gt;April&lt;/option&gt; &lt;option value='05'&gt;May&lt;/option&gt; &lt;option value='06'&gt;June&lt;/option&gt; &lt;option value='07'&gt;July&lt;/option&gt; &lt;option value='08'&gt;August&lt;/option&gt; &lt;option value='09'&gt;September&lt;/option&gt; &lt;option value='10'&gt;October&lt;/option&gt; &lt;option value='11'&gt;November&lt;/option&gt; &lt;option value='12'&gt;December&lt;/option&gt; &lt;/select&gt; &lt;/div&gt;&lt;div class='dob-date input-box dob-field'&gt; &lt;input type='text' id='dob-date' title='date' maxlength='2' class='input-text'&gt; &lt;/div&gt;&lt;div class='dob-year input-box dob-field'&gt; &lt;input type='text' id='dob-year' title='year' maxlength='4' class='input-text'&gt; &lt;/div&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt; &lt;/div&gt;";
      $j(".btn-addchild").click(function() {
        $j(".child-info-content").append(htmlcode);
        id_count++;
        //        alert(id_count);
      });
      $j(".child-info-content").on('click', '#removechild', function() {
        $j(this).parents('.fieldsetAdditional').slideUp("normal", function() {
          $j(this).parents('.fieldsetAdditional').remove();
        });
        id_count = id_count - id_sub;
        //        alert(id_count);
      });
      $j('.born').on("click", ".check-input", function() {
        if (this.checked) {
          $j('.childname-field').hide();
          $j('.gender-field label').text("Your Child's Predicted Gender").append("&lt;em&gt;*&lt;/em&gt;");
          $j('.input-select').append("&lt;option class='optional'&gt;Unknown&lt;/option&gt;");
          $j('.dob-fields label').text("Due Date").append("&lt;em&gt;*&lt;/em&gt;");
        } else {
          $j('.childname-field').show();
          $j('.gender-field label').text("Your Child's Gender").append("&lt;em&gt;*&lt;/em&gt;");
          $j('.input-select .optional').remove();
          $j('.dob-fields label').text("Date Of Birth").append("&lt;em&gt;*&lt;/em&gt;");
        }
      });
      $j(".fieldsetAdditional").click(function() {
        alert("test");
      });
  </code></pre>
  
  <p>I am sorry if this is a really simple or stupid question, I am still learning. I have also looked at a lot of other posts on here to try and find my answer but I can not find a solution or the solution doesn't work for me. I hope you can help me and thank you in advance! I hope this all makes sense as well.</p>
  
  <p>Here is my JSFiddle with all the code for it (apart from some of the styles)(<a href="https://jsfiddle.net/benEdpa/0sLad9t5/4/" rel="nofollow">https://jsfiddle.net/benEdpa/0sLad9t5/4/</a>)</p>