title: How to remove and append from loop array Javascript?
body: <p>i have a form like this.
  <a href="https://i.stack.imgur.com/V7ivb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V7ivb.png" alt="enter image description here"></a></p>
  
  <p>when i change from country, how to remove this form and append again from looping array. if data only one, show Add Form Button and if data > 1, first form always show Add Form Button, for 2nd,3th.. show Delete Form Button.</p>
  
  <p>this is my data : [{"gamename":"nama game 1","gamelink":"link game 1","image_link":"link gambar 1","startfrom":"1"},{"gamename":"nama game 2","gamelink":"link game 2","image_link":"link gambar 2","startfrom":"2"}]</p>
  
  <p>This is my script, but not working:</p>
  
  <pre><code>var elem = document.getElementById('formadd');
  elem.parentNode.removeChild(elem);
  var json = response.data[0].games;
  var array = JSON.parse(json);
  for (var i = 0; i &lt; array.length; i++) {
  $('.formadd').append(
  
  '&lt;div id="game-form-'+i+'"&gt;'+
              '&lt;hr&gt;'+
                  '&lt;div class="form-group"&gt;'+
                      '&lt;div class="col-md-3"&gt;'+
  
                      '&lt;/div&gt;'+
                      '&lt;div class="col-md-6"&gt;'+
                          '&lt;label for="gamename" class="control-label col-sm-2"&gt;Game Name&lt;/label&gt;'+
                              '&lt;div class="col-sm-10" style="margin-bottom: 5px"&gt;'+
                                  '&lt;input class="form-control valid" name="gamename[]" type="text" id="gamename" aria-invalid="false" required&gt;'+
                              '&lt;/div&gt;'+
  
                              '&lt;label for="gamelink" class="control-label col-sm-2"&gt;Game Link&lt;/label&gt;'+
                              '&lt;div class="col-sm-10" style="margin-bottom: 5px"&gt;'+
                                  '&lt;input class="form-control" name="gamelink[]" type="text" id="gamelink" required&gt;'+
                              '&lt;/div&gt;'+
  
                              '&lt;label for="image_link" class="control-label col-sm-2"&gt;Image Link&lt;/label&gt;'+
                              '&lt;div class="col-sm-10" style="margin-bottom: 5px"&gt;'+
                                  '&lt;input class="form-control" name="image_link[]" type="text" id="image_link" required&gt;'+
                              '&lt;/div&gt;'+
  
                              '&lt;label for="startfrom" class="control-label col-sm-2"&gt;Start From&lt;/label&gt;'+
                              '&lt;div class="col-sm-10" style="margin-bottom: 5px"&gt;'+
                                  '&lt;input class="form-control" name="startfrom[]" type="text" id="startfrom" required&gt;'+
                              '&lt;/div&gt;'+
  
                      '&lt;/div&gt;'+
                      '&lt;div class="col-md-3"&gt;&lt;a href="#" onclick="deleteForm('+i+')" class="btn btn-sm btn-danger pull-left"&gt;Delete Form&lt;/a&gt;&lt;/div&gt;'+
                  '&lt;/div&gt;'+
              '&lt;/div&gt;' 
              );
  }
  </code></pre>
  
  <p>i want to like this:
  <a href="https://i.stack.imgur.com/MyF37.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MyF37.png" alt="enter image description here"></a></p>