Javascript 为Ajax请求生成多个按钮

我正在做一个ASP.NETMVC5Web应用程序。其中一个页面是统计页面，假设有一个SelectList，用于选择我在第1、2、4或6页上有多少图表。 然后，我将有相同数量的按钮来分别生成每个图形

像这样：

<div id="myContainer">
  <select id="totalCharts>
     ....
  </select>
  <div id="ChartArea1">
      <button id="btn1"></button>
      <canvas id="chart1></canvas>
  </div>

    ....
  <div id="ChartAreaN">
     <button id="btnN"></button>
     <canvas id="chartN></canvas>
  </div>
</div>

然后，我想在单击按钮时生成每个带有Ajax请求的图表

---

我试过几种方法，但都不管用。您能告诉我最简单的方法吗？

检查链接以获取完整的代码：

---

请发布您在问题中尝试过的内容。代码有点大，但我设法生成了几个具有不同id的图表，如chart1、chart2等。。。问题是，当我想要生成具有相同ID的不同AJAX请求时，请分离代码的相关部分，并向我们展示您迄今为止所做的工作。除了问最简单的方法，这是一个相关的术语，因为对一个人来说很难的事情对另一个人来说也很容易，你的问题真的很不清楚，基于观点，很广泛，而且没有任何努力。请在您的问题中发布您需要帮助的特定代码。

$(document).ready(function(){
            var n=10; //no of items in dropdown
            for(i=1;i<=n;i++){
                $('#totalCharts').append('<option value="'+i+'">'+i+'</option>');
            }                   
        });     
        //code to populate divs,buttons,canvas
        $('#totalCharts').change(function(){
            for(j=1;j<=$(this).val();j++){
                $('#myContainer').append('<div id="ChartArea'+j+'"><button id="btn'+j+'">Button '+j+'</button><canvas id="chart'+j+'"> </canvas></div>');
            }
        });
        $('button').click(function(e){
            e.preventDefault();
            var url="http://www.example.com"; //put your url here
            var id=$(this).attr('id'); //if you need button id
            $.ajax(url, {
                success: function(data) {
                    //code to draw chart here
                },
                error: function() {
                    alert('Error in sending ajax');
                }
            });

        });