title: How to toggle some info while creating divs dynamically?
body: <p>I want to toggle divs that am dynamically creating when a person clicks on add but it isn't toggling but the divs are being created. Please help.Here's my code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var i = 1;
  
  function addShoe() {
    i++;
    var div = document.createElement('div');
    div.innerHTML = '&lt;input type="button" id="add_Shoe" onClick="addShoe()" value="Add"/&gt;&lt;input type="text" name="shoe[shoeCode[]]" size="5"&gt;&lt;input type="text" name="shoe[shoeName[]]" size="10"&gt;&lt;a href="#" class="trigger" style="float:right"&gt;Details&lt;/a&gt;&lt;input style="float:right;" type="button" value="Delete" onClick="removeShoe(this)"&gt;&lt;div class="ShoeSize" style="margin-left:260px"&gt;&lt;input type="text" name="shoe[shoeSize[[]]]" size="7"style="margin-left=140px"&gt;&lt;input type="text" name="shoe[shoeQuantity[[]]]" size="7"&gt;&lt;input type="text" name="shoe[shoePrice[]]" size="7"&gt;&lt;input type="text" name="shoe[totalCost[]]" size="7"&gt;&lt;/div&gt;';
    document.getElementById('kids').appendChild(div);
  }
  
  function removeShoe(div) {
    document.getElementById('kids').removeChild(div.parentNode);
    i--;
  }
  $(document).ready(function() {
    $(".trigger").click(function() {
      $(this).next(".ShoeSize").toggle();
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form method="post" ng-app=""&gt;
  
    &lt;table width="45%"&gt;
      &lt;tr&gt;
        &lt;td style="width:50px;padding-left:30px"&gt;Shoe Code&lt;/td&gt;
        &lt;td style="width:70px"&gt;Shoe Name&lt;/td&gt;
        &lt;td style="width:30px;padding-left:5px"&gt;Different size&lt;/td&gt;
        &lt;td style="width:50px"&gt;Shoe Size&lt;/td&gt;
        &lt;td style="width:50px"&gt;Shoe Quantity&lt;/td&gt;
        &lt;td style="width:50px"&gt;Shoe Price&lt;/td&gt;
        &lt;td style="width:50px"&gt;Total Cost&lt;/td&gt;
      &lt;/tr&gt;
      &lt;table&gt;
        &lt;div id="kids" style="width:60%"&gt;
          &lt;input type="button" id="add_Shoe" onClick="addShoe()" value="Add" /&gt;
          &lt;input type="text" name="shoe[shoeCode[]]" size="5"&gt;
          &lt;input type="text" name="shoe[shoeName[]]" size="10"&gt;&lt;a href="#" class="trigger" style="float:right"&gt;Details&lt;/a&gt;
          &lt;input style="float:right;" type="button" value="Delete" onClick="removeShoe(this)"&gt;
          &lt;div class="ShoeSize" style="margin-left:260px"&gt;
            &lt;input type="text" name="shoe[shoeSize[[]]]" size="7" style="margin-left=140px"&gt;
            &lt;input type="text" name="shoe[shoeQuantity[[]]]" size="7"&gt;
            &lt;input type="text" name="shoe[shoePrice[]]" size="7"&gt;
            &lt;input type="text" name="shoe[totalCost[]]" size="7"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>`</p>