マウスを乗せて出るボタンで、入力欄に文字を挿入する

    <tr>
      <td class="no">1</td>
      <td>
        <div class="insert">
          <span class="insert__open">▲</span>
          <ul class="insert__list">
            <li data-char="[動]">動</li>
            <li data-char="[形]">形</li>
            <li data-char="[名]">名</li>
            <li data-char="[副]">副</li>
            <li data-char="[接]">接</li>
            <li data-char="[前]">前</li>
          </ul>
        </div>
      </td>
      <td><input type="text" class="meaning" placeholder="例: [動] 走る"></td>
      <td><input type="text" class="word" placeholder="例: run"></td>
      <td><button type="button" class="btn row-del">削除</button></td>
    </tr>

<style>
.word-table input { width: 100%; }
.insert { position: relative; display: inline-block; }
.insert__open { display: inline-block; padding: 4px 8px; border: 1px solid #d8d3c7; border-radius: 6px; cursor: pointer; background: #fff; }
.insert__list { display: none; position: absolute; left: 0; top: 100%; z-index: 5; margin: 0; padding: 4px; list-style: none; white-space: nowrap; background: #1d2433; border-radius: 8px; }
.insert__list li { display: inline-block; width: 30px; margin: 2px; padding: 4px 0; text-align: center; font-size: 13px; color: #fff; border-radius: 5px; cursor: pointer; background: #3c4557; }
.insert__list li:hover { background: #ffd866; color: #1d2433; }
</style>

    // ① マウスが乗ったらボタン一覧を出し、離れたら隠す
    $('.word-table').on('mouseenter', '.insert', function() {
        $(this).children('ul').show();
    }).on('mouseleave', '.insert', function() {
        $(this).children('ul').hide();
    }).on('click', '.insert__open', function() {
        $(this).next('ul').toggle();   // スマホ用: タップでも開閉できるように
    });

    // ② 品詞ボタンをクリックしたら、同じ行の「意味」欄の後ろに記号を足す
    $('.word-table').on('click', '.insert__list li', function() {
        var input = $(this).closest('tr').find('.meaning');   // 同じ行の入力欄を探す
        input.val(input.val() + $(this).data('char')).focus();
    });

    // ③ 行を追加する（1行目をコピーして中身を空にする）
    $('.row-add').on('click', function() {
        var row = $('.word-table tbody tr:first').clone();
        row.find('input').val('');
        row.find('ul').hide();
        $('.word-table tbody').append(row);
        renumber();
    });

    // ④ 行を削除する（最後の1行は残す）
    $('.word-table').on('click', '.row-del', function() {
        if ($('.word-table tbody tr').length > 1) {
            $(this).closest('tr').remove();
            renumber();
        }
    });

    // 行番号をふり直す
    function renumber() {
        $('.word-table tbody tr').each(function(i) {
            $(this).find('.no').text(i + 1);
        });
    }