JSFiddle - React, Tailwind, and code Playground

https://teratail.com/questions/239535

by Lhankor_Mhy

HTML

<div class="contentsPanel">
  <div class="contentsPanel__unit modFlexBox">
    <div class="contentsPanel__unit__title">タイトル</div>
    <div class="contentsPanel__unit__item">XXX</div>
  </div>
  <div class="contentsPanel__unit">
    <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
      テキストエリア
      <div class="modBtn">
        <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
      </div>
    </div>
    <div class="contentsPanel__unit__item">
      <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
    </div>
  </div>
  <div class="contentsPanel__unit modFlexBox">
    <div class="contentsPanel__unit__title">タイトル</div>
    <div class="contentsPanel__unit__item">XXX</div>
  </div>
  <div class="contentsPanel__unit modFlexBox">
    <div class="contentsPanel__unit__title">タイトル</div>
    <div class="contentsPanel__unit__item">XXX</div>
  </div>
  <div class="contentsPanel__unit">
    <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
      テキストエリア
      <div class="modBtn">
        <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
      </div>
    </div>
    <div class="contentsPanel__unit__item">
      <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
    </div>
  </div>
  <div class="contentsPanel__unit">
    <div class="contentsPanel__unit__title contentsPanel__unit__title--all modFlexBox">
      テキストエリア
      <div class="modBtn">
        <button type="button" class="modBtn__item modBtn__item--secondary modBtn__item--xs is-copyBtn">コピー</button>
      </div>
    </div>
    <div class="contentsPanel__unit__item">
      <textarea id="testCopy" class="modForm modForm--textarea is-copyText" placeholder="test test test" readonly></textarea>
    </div>
 ...

JavaScript

$(function(){
    $('.is-copyBtn').on('click',function(){
      var textElem = $(this).parents('.contentsPanel__unit__title').next('.contentsPanel__unit__item').find('.is-copyText');
      textElem[0].select();
      document.execCommand("copy");
    });
});