script.js

async () => {

  document.addEventListener('click', function (event) {
    let tagItem = event.target.closest('.m5dd_list')
    let resultArea = event.target.closest('#m5dd_result')
    if (tagItem) {
      let labelItem = event.target.closest('span.label')
      let upItem = event.target.closest('span.up')
      let downItem = event.target.closest('span.down')
      let addItem = event.target.closest('span.add')
      let decItem = event.target.closest('span.dec')
      let actionItem = event.target.closest('span.action')
      if (labelItem) {
        if (tagItem.classList.contains('use')) {
          tagItem.classList.remove('use')
        } else {
          tagItem.classList.add('use')
        }
      }
      if (upItem) { }
      if (downItem) { }
      if (addItem) {
        let label = tagItem.querySelector('span.label').innerText
        tagItem.querySelector('span.label').innerText = `(${label})`
      }
      if (decItem) {
        let label = tagItem.querySelector('span.label').innerText
        label = label.replace(/^\s*\(\s*(.+?)\s*\)\s*$/, '$1')
        tagItem.querySelector('span.label').innerText = label
      }
      if (actionItem) {
        document.getElementById('m5dd_result').innerText =
          Array.from(document.querySelectorAll('.m5dd_list.use>span.label'))
            .map(v => v.innerText)
            .join(', ')
      }
    } else if (resultArea) {
      const selection = window.getSelection()
      selection.removeAllRanges()
      const range = document.createRange()
      range.selectNodeContents(resultArea)
      selection.addRange(range)
    } else {
      return
    }
  })

}