两个不同的谷歌cse不能在一个页面上工作

Question

我想在一个页面中从Google自定义搜索中获得两个不同的结果。

我的代码：

<div id="1">
<script>
  (function() {
    var cx = 'cse code 1';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only gname="one"></gcse:searchresults-only>
</div>


<div id="2">
<script>
  (function() {
    var cx = 'cse code 2';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchresults-only gname="two"></gcse:searchresults-only>
</div>

添加两个代码时，不会显示任何结果。但如果其中一个存在，将显示结果。但我需要在两个不同的块中显示两者的结果