title: load ajax content in two different div on the same page at the same way
body: <p>Working with Twig and php, I have three main div in my html page:</p>
  
  <pre><code>&lt;select class="form-control" id="choice" name="form[choice]"&gt;
    &lt;option value="" disabled selected&gt;make a choice&lt;/option&gt;
    &lt;!-- here the path variable matches with an url --&gt;
    &lt;option value="{{ path('get_data_by_choice', {'slug': variable.slug}) }}"&gt;
      {{ variable.name }} 
    &lt;/option&gt;
  &lt;/select&gt;
  
  &lt;div id="showOption"&gt;&lt;/div&gt;
  
  &lt;div id="showCategory"&gt;
  </code></pre>
  
  <p>By a jQuery script I return a page content in a div (here in <code>&lt;div id="showOption"&gt;&lt;/div</code>)</p>
  
  <p>Look at the script:</p>
  
  <pre><code>&lt;script&gt;
    $('#choice').change(function() {
        var url = $(this).val();
        $.get(url , {} , function(showAvailableConfig) {
            $("#showOption").html(showAvailableConfig));
        })
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>So it returns me all content of the page with url matches with the variable <code>{{ path('get_data_by_choice', {'slug': variable.slug}) }}</code> in the div with <code>id="ShowOption"</code>.</p>
  
  <p>This is the content of the page I load via the script:</p>
  
  <pre><code>&lt;div id="content1"&gt; some content1 here &lt;/div&gt;
  
  &lt;div id="content2"&gt; some other content2 here &lt;/div&gt;
  </code></pre>
  
  <p>In fact, with the same script, I would like to append, populate the <code>div id="showOption"</code> <strong>with</strong> the <code>div id="content1"</code> <strong>and</strong> the <code>div id="showCategory"</code> <strong>with</strong> the <code>div id="content2"</code>by selecting one value in my initial select tag.</p>
  
  <p>How can I proceed ?</p>