title: Ajax display my whole html each time I do a request
body: <p>This is a rails app, and I am trying to make dynamique my Gmaps markers... </p>
  
  <p>With the code below my html is repeated each time I do a request...
  I am very new with JS and Ajax, please What should I do to make it work? </p>
  
  <pre><code>$(function(){
  
    $('#normal-choice input').on('click', function(event) {
      var url = '/meals?';
      $.ajax({
        type: "GET",
        url: url,
        data: $('.normal-form').serialize(),
        success: function(data) {
          $('.meals-normal').replaceWith($(data).find('.meals-normal').parent().html()),
          $('#map').replaceWith($(data)).find('#map').updateMarkers(markerJson),
  
          history.replaceState({}, "meals", url);
        },
  
        error: function(jqXHR) {
          console.error(jqXHR.responseText);
        }
      });
    });
  });
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>when <code>$('#map').replaceWith($(data)).find('#map').updateMarkers(markerJson);</code> is not in the code, the meal are well displayed a reload when filtered
  and when I had that line... it messes every thing... </p>
  
  <h3>here is some more of my code:</h3>
  
  <p>this my meals index view</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
  
      &lt;div class="col-sm-2"&gt;
        &lt;section class="choice" id="normal-choice"&gt;
          &lt;form action="/meals" method="get" class= "normal-form"&gt;
            &lt;ul class="list-unstyled"&gt;
              &lt;% @categories.each do |category| %&gt;
                &lt;li&gt;
                  &lt;label class="categories"&gt;
                    &lt;input type="checkbox" name="categories[]" value="&lt;%= category.name %&gt;"
                      &lt;%= "checked" if !params[:categories].nil? &amp;&amp; params[:categories].include?(category.name) %&gt;&gt;
  
                    &lt;span&gt;
                       &lt;span class="icons text-center"&gt;
                          &lt;i class="fa fa-heart" aria-hidden="true"&gt;&lt;/i&gt;
                       &lt;/span&gt;
                      &lt;%= category.name %&gt;
                    &lt;/span&gt;
  
                  &lt;/label&gt;
                &lt;/li&gt;
              &lt;% end %&gt;
            &lt;/ul&gt;
            &lt;input class="valid-btn" type="submit" value="Filtrer"&gt;
          &lt;/form&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  
    &lt;div class="col-sm-10"&gt;
      &lt;section class="meals-normal"&gt;
        &lt;% if @meals_count != 0 %&gt;
          &lt;div class="row"&gt;
            &lt;% @meals.sort.each do |meal| %&gt;
              &lt;div class="col-xs-12 col-sm-6 col-md-4"&gt;
                &lt;%= link_to meal_path(meal) do %&gt;
                &lt;div class="card-meal"&gt;
                  &lt;div class="description text-center"&gt;
                    &lt;div class="description-meal"&gt;
                      &lt;h3&gt;&lt;%= meal.menu_name  %&gt;&lt;/h3&gt;
                      &lt;span&gt;&lt;small&gt;&lt;%= meal.category.name %&gt;&lt;/small&gt;&lt;/span&gt;
                      &lt;br&gt;
                      &lt;% if  meal.images?%&gt;
  
                        &lt;%= cl_image_tag meal.images.first.path, width: 200, height: 100, crop: :fill %&gt;
  
                      &lt;% end %&gt;
                      &lt;h4&gt;Cuisiné par: &lt;%= meal.user.nickname %&gt;&lt;/h4&gt;
                      &lt;p&gt;Prévu pour le: &lt;%= meal.availability %&gt;&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class="price-icons"&gt;
                      &lt;p&gt; &lt;%= humanized_money_with_symbol(meal.price) %&gt;&lt;/p&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;% end %&gt;
            &lt;% end %&gt;
          &lt;/div&gt;
  
        &lt;% else %&gt;
          &lt;p class="no-meal"&gt;Aucun repas ne correspond à votre recherche.
  
           &lt;%= link_to 'Effacer les filtres', meals_path('category[]' =&gt; 'all') %&gt;
           &lt;/p&gt;
        &lt;% end %&gt;
  
      &lt;/section&gt;
    &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;div id="map" style="width: 100%; height: 600px;" data-markers='&lt;%= raw @markers_hash.to_json %&gt;'&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my map.js</p>
  
  <pre><code>var handler = Gmaps.build('Google');
  
  $(document).on('ready', function() {
    if ($('#map').length &gt; 0) {
      var markerJson = $('#map').data('markers');
      drawMeAMap(markerJson);
    }
  });
  
  function drawMeAMap(markerJson){
    $('#map').html('');
    handler.buildMap(
      {
        internal: { id: 'map' }
  
      },
      addMarkers(markerJson),
    );
  };
  
  function updateMarkers(markerJson){
    removeMarkers(markerJson);
    addMarkers(markerJson);
  
  };
  
  function removeMarkers(markerJson){
    handler.buildMap({ internal: { id: 'map' } }, function() {
      markers = handler.removeMarkers(markerJson);
      });
  };
  
  function addMarkers(markerJson){
    handler.buildMap({ internal: { id: 'map' } }, function() {
      markers = handler.addMarkers(markerJson);
      handler.bounds.extendWith(markers);
      handler.fitMapToBounds();
      if (markers.length == 0) {
        handler.getMap().setZoom(2);
      } else if (markers.length == 1) {
        handler.getMap().setZoom(14);
      }
    });
  };
  </code></pre>
  
  <p>Thanks for your help :)</p>