我有一个函数，可以一步一步地打印文本。当你点击按钮时，就会发生一个事件（这就是触发函数的时间）。但是如果你按几次按钮，文本就会被打印在另一个按钮的上面。如果有人对此有任何想法，我真的需要帮助。如果可能的话，请对代码给予建议。

function printText(element) {
    element.text('')
    const text = element.attr('data-text')
    let counter = 0
    let newText = ''
    const print = setInterval(() => {
      if(counter <= text.length && text[counter] != undefined){
        newText = newText + text[counter]
        counter++
      }else{clearInterval(print)}
      
      element.text(newText)
    }, 30)
  }

  accordingButtons.click(function(e){
    const $target = $(this)
    const $targetBody = $target.attr('class') === 'polygon-but' ? $target.parent().parent().next() : $target.parent().next()

    if($target.attr('data-toggle') == 'true'){
      $targetBody.animate({
        opacity: 0.0,
        height: `0px`,
        marginTop : '0px'
      }, 200)
      $target.attr('data-toggle', 'false')
    }
    else if($target.attr('data-toggle') == 'false'){
      $targetBody.animate({
        opacity: 1,
        height: `+=${$targetBody.attr('data-number')}`,
        marginTop : '37px'
      }, 200)
      $target.attr('data-toggle', 'true')
      printText($targetBody)
    }
    
  })