title: how to save value dynamically receiving from html form and send to server
body: <p>I'm trying to create form that send data to servlet.
  Here im adding some input box dynamically on Click of button. But whenever i enter data and click new "add data" , previous data get lost and it does not appear in input box.
  Screen shot of form after clicking Add Data<a href="https://i.stack.imgur.com/pRmiN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pRmiN.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/XJcTQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XJcTQ.png" alt="screen shot before clicking &quot;Add data&quot;"></a></p>
  
  <p><strong>I'll have to create it dynamically.
  But when I click on add data of add content the data fields values the i have already filled diappears as shown in the screenshot. How to save the data there?
  And then how to send the whole form data to the servlet on click of submit button?</strong>
  code of html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function add_fields() {
  console.log(document.getElementById('wrapper').innerHTML);
      document.getElementById('wrapper').innerHTML += "&lt;br /&gt;&lt;span&gt;Step Number: &lt;input name='step' type='number'style='width:75px;'value='' /&gt;&lt;/span&gt;  &lt;span&gt; Add Content: &lt;input type='button' onClick='addContent()' value='Add Content' /&gt;&lt;/span&gt;";
  console.log(document.getElementById('wrapper').innerHTML);
  }
  function addContent(){
  console.log(document.getElementById('wrapper').innerHTML);
  document.getElementById('wrapper').innerHTML +="&lt;br /&gt;&lt;span&gt;&lt;input name='contentimage' type='text' placeholder='enter image url' /&gt;&lt;/span&gt;&lt;span&gt;&lt;input name='contentmessage' type='text' placeholder='enter message' /&gt;&lt;/span&gt;&lt;span&gt;&lt;input name='alert' type='text' placeholder='enter alert' /&gt;&lt;/span&gt;";
  console.log(document.getElementById('wrapper').innerHTML);
  }
  &lt;/script&gt;
    &lt;style&gt;
    .modal-header, h4, .close {
        background-color: #5cb85c;
        color:white !important;
        text-align: center;
        font-size: 30px;
    }
    .modal-footer {
        background-color: #f9f9f9;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
    &lt;!-- Trigger the modal with a button --&gt;
    &lt;button type="button" class="btn btn-default btn-lg" id="myBtn"&gt;Share Solutions&lt;/button&gt;
  
    &lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header" style="padding:35px 50px;"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4&gt;Add Solutions&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body" style="padding:40px 50px;"&gt;
            &lt;form role="form"&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="cost"&gt;Cost&lt;/label&gt;
                &lt;input type="text" class="form-control" name="cost" id="cost" placeholder="Enter cost"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="difficulty"&gt;Difficulty&lt;/label&gt;
                &lt;input type="text" class="form-control" name="difficulty" id="difficulty" placeholder="Enter Difficulty"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="image"&gt;Image&lt;/label&gt;
                &lt;input type="text" class="form-control" name="image" id="image" placeholder="Enter Image Url"&gt;
              &lt;/div&gt;
               &lt;div class="form-group"&gt;
                &lt;label for="message"&gt;Message&lt;/label&gt;
                &lt;input type="text" class="form-control" name="message" id="message" placeholder="Enter Message"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="title"&gt;Title&lt;/label&gt;
                &lt;input type="text" class="form-control" name="title" id="title" placeholder="Enter Title"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                &lt;label for="description"&gt;Description&lt;/label&gt;
                &lt;input type="text" class="form-control" name="description" id="description" placeholder="Enter Description"&gt;
              &lt;/div&gt;
            &lt;div class="form-group" id="wrapper"&gt;
                &lt;label for="description"&gt;Data&lt;/label&gt; &lt;button  class="btn btn-success btn-block" type="submit" onClick="add_fields()"&gt; Add Data&lt;/button&gt;
            &lt;/div&gt;
            &lt;div&gt;
  
            &lt;/div&gt;                                                   
                &lt;button type="submit" class="btn btn-success btn-block"&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
            &lt;button type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal" onClick="window.location.reload()"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Cancel&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
      $("#myBtn").click(function(){
          $("#myModal").modal();
      });
  });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>