title: jQuery - Show entered text from input field as heading for Dynamically added block
body: <p>jQuery with Bootstrap Modal...</p>
  
  <p>I am creating info boxes dynamically and allowing users to type box heading through input textbox and clearing the input after adding it...</p>
  
  <p>First time, it is working as expected.. where as If I try to create one more box, previously created boxes headers also changing... :(</p>
  
  <p>How can I create a box with unique textfield every time?</p>
  
  <blockquote>
    <p><strong><a href="https://jsfiddle.net/ReddyPrasad/3yz9te79/" rel="nofollow">Online Demo</a></strong></p>
  </blockquote>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container wrapper"&gt;
  
    &lt;button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModal"&gt;
      &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Add More
    &lt;/button&gt;
  
    &lt;div class="box-holder clearfix"&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-body"&gt;
          &lt;form role="form"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="title"&gt;Title:&lt;/label&gt;
              &lt;input type="text" class="form-control" id="title"&gt;
            &lt;/div&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="options"&gt;Options:&lt;/label&gt;
              &lt;select id="mySelectOptions"&gt;
                &lt;option&gt;Option 1&lt;/option&gt;
                &lt;option&gt;Option 2&lt;/option&gt;
                &lt;option&gt;Option 3&lt;/option&gt;
                &lt;option&gt;Option 4&lt;/option&gt;
                &lt;option&gt;Option 5&lt;/option&gt;
                &lt;option&gt;Option 6&lt;/option&gt;
              &lt;/select&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary" id="addBox" data-dismiss="modal"&gt;Add Box&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(document).ready(function () {
  
    $('#addBox').click(function () {
      $( ".wrapper .box-holder" ).append( '&lt;div class="new-box"&gt;&lt;div&gt;&lt;label class="box-title"&gt;Title: &lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;div&gt;&lt;label class="box-values"&gt;Values: &lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;/div&gt;&lt;/div&gt;' );
  
     var newTitle = $(".modal-body .form-group #title").val();
     $(".new-box .box-title span").text(newTitle);
  
      $(".modal-body .form-group #title").val('');
  
    });       
  
  });
  </code></pre>