How does the element table table cycle through a div?

such a table wants to appear a QR code under each button "Wechat QR code". Press the current comment div when calling the plug-in method, all the QR codes go below the first button. How to implement the next button?

     <el-table-column label="" width="200%">
        <template slot-scope="scope">
          <el-popover
            placement="bottom"
            title=""
            trigger="hover">
            <!--<div v-show="flag" id="qrcode" ref="qrcode" ></div>-->
            <div slot="reference" class="name-wrapper" style="display: inline-block">
              <el-button size="small" type="danger" style="margin-top:10px" class="chat">
                <a style="color: -sharpfff;" @mouseover="selectStyle" @mouseout="selectOut"></a>
              </el-button>
            </div>
          </el-popover>
        </template>
      </el-table-column>

call the plug-in QR code method

      let qrcode = new QRCode("qrcode",{
          width: 100,    // 
          height: 100,   // 
          text: "http://www.cpglib.com/wx/index?shopId="+scope.row.shopId,   // 
        })

Element javascript qrcode

Nov.16,2021

thanks for inviting ~
the way you write it, there is only one id .
scenario 1. Generate all at once:

<div v-show="flag" :id="`qrcode${scope.$index}`" ref="qrcode" ></div>

then loop out

// for
let qrcode = new QRCode(`qrcode${index}`,{
  width: 100,    // 
  height: 100,   // 
  text: 'http://www.cpglib.com/wx/index?shopId='+scope.row.shopId,   // 
});

scenario 2:
can also generate this QR code when hover.
selectStyle (index) {

let qrcode = new QRCode(`qrcode${index}`,{
  width: 100,    // 
  height: 100,   // 
  text: 'http://www.cpglib.com/wx/index?shopId='+scope.row.shopId,   // 
});

}

Previous: Socketlog output problem

Next: Why does the JavaScript page display the alert () box first instead of the page element first?