无法从textarea获取更新的文本

Question

为什么我无法从具有相同类和默认文本的两个textarea元素中获取更新文本？

例如，如果我尝试将新文本添加到这些textarea元素中的任何一个，那么点击按钮我只得到旧值。

这是我的代码：

HTML

<div class="tag-container">
  <textarea class="variables">s:asset:type, s:event:type, l:event:playhead, s:asset:video_id, s:asset:ad_id, s:user:mid</textarea>
  <button class="remove-tag">Remove</button>
  <hr/>
</div>

<div class="tag-container">
  <textarea class="variables">name, mid, pev3</textarea>
  <button class="remove-tag">Remove</button>
  <hr/>
</div>

<button class="validate">Validate</button>

JS：

$(document).on('click', '.validate', function() {

  var variables = "";
  $('.variables').each(function(){
    variables += $(this).text() + ",";
  });

  console.log(variables);
});

JSFIDDLE