如何遍历具有2个canvas（使用json数据）的手风琴（在html页面中）以在我的html页面中的每个手风琴中显示画布

Question

如何遍历手风琴（在html页面中），它是layout_id，每个都有2个canvas（来自json数据）以在我的html页面的每个手风琴（layout_id）中显示画布

HTML页面

<div id="{{row.PCB_Id}}" class="panel-collapse collapse in"> #accordion having layout_id#

  <!-- <div class="col-sm-3" id="{{row.PCB_Id}}_A"></div> -->#passing value A coming from p5.js#
  <div class="col-sm-3" id="c1"></div>
  <div class="col-sm-3" id="c2"></div>

javascript（p5.js）

var s = function(p) { // p could be any variable name

  p.preload = function() {
    value = p.loadJSON('payload.json');
  };

  p.setup = function() {
    var canvas = p.createCanvas(canvas_width, canvas_height);
    canvas.parent("c1");
    p.noLoop();
    translateFunc(value);
    scalingFunc(min_x, min_y, max_x, max_y);
    funcLoopOverLayouts(value);
  };


  p.draw = function() {
    for (var key in value) {
      for (var point in value[key]) {

        if (value[key][point].side == 'A') {
          for (var v in value[key][point].points) {
            for (var polygon in value[key][point].points[v]) {

              p.beginShape();
              for (var polygonPoints in value[key][point].points[v][polygon]) {
                if (value[key][point].id == "Board Figure") {
                  p.noFill();
                  p.stroke('#222222');
                } else if (value[key][point].id == "Cooling Area A") {
                  p.noFill();
                  p.stroke(p.color('0, 0, 255'));
                } else {
                  p.fill('#008000');
                }
                var x_before = value[key][point]['points'][v][polygon][polygonPoints][0];
                var y_before = value[key][point]['points'][v][polygon][polygonPoints][1];
                var x_after = p.abs((x_before + (-min_x)) * scaling_factor_x);
                var y_after = p.abs((y_before + (-max_y)) * scaling_factor_y);
                p.strokeWeight(0.2);
                p.vertex(x_after, y_after);
              }
              p.endShape();
            }
          }
        }
      }
    }
  };
};
//#Added A for sketch one to pass in the html page#
funcLoopOverLayouts = function(value) {
  for (var pcb in value) {
    console.log("Point - ", pcb);
    //var myp5 = new p5(s, pcb + "_A");
  }
}
var myp5 = new p5(s, 'c1'); //> for sketch one
//----------------------------------------------------------//
var t = function(p) {

    p.preload = function() {
      data = p.loadJSON('payload.json');
    };

    var myp5 = new p5(t, 'c2'); //same for sketch 2