Edit in JSFiddle

JavaScript
HTML
CSS

$(function() {

  $('#btnClear').click(function() {
    $('#prefix').val('');
    $('#suffix').val('');
    $('#target').val('');
    $('#result').val('');
  });
  $('#usage').hide();
  $('#btnUsage').click(function() {
    $('#usage').show(1000).delay(5000).hide(1000);
  });

  $('#prefix').each(function() {
    $(this).bind("keyup", execute(this));
  });

  　
  $('#suffix').each(function() {
    $(this).bind("keyup", execute(this));
  });

  　
  $('#target').each(function() {
    $(this).bind("keyup", execute(this));
  });
});

function execute(elm) {
  var v, old = elm.value;

  return function() {
    if (old != (v = elm.value)) {
      old = v;

      var f = $('#prefix').val();
      var e = $('#suffix').val();
      console.log(f + ":" + e);

      var text = $('#target').val().replace(/\r\n|\r/g, "\n");
      var lines = text.split('\n');

      var text2 = '';

      $.each(lines, function(i, line) {
        if (line != '') {
          console.log('[' + i + ']' + line);

          text2 += f + line + e + '\n';
        }
      });

      $('#result').val(text2);

    }
  }

}

<body>
  <div id="wrap">
    <div class="contents">
      <div class="leftContents">
        <div class="category">
          <span>Target:</span>
        </div>
        <div>
          <div class="col-txt">
            <span>Prefix:</span>
          </div>
          <div class="col-val">
            <input type="text" id="prefix">
          </div>
        </div>
        <div class="clear">
          <div class="col-txt">
            <span>Suffix:</span>
          </div>
          <div class="col-val">
            <input type="text" id="suffix">
          </div>
        </div>
        <div class="clear">
          <textarea id="target" class="insert"></textarea>
        </div>
      </div>
      <div class="rightContents">
        <div class="category">
          <span>Result:</span>
        </div>
        <div>
          <textarea id="result" class="insert"></textarea>
        </div>

      </div>
      <div class="clear">
      </div>
      <div class="action">
        <input type="button" id="btnClear" value="clear">
        <input type="button" id="btnUsage" value="usage">
        <div id="usage">
          <pre>文字列の各行の前後に指定の値を付与します。

例：
[Prefix] : "
[Suffix] : ",
[Text]   : 123
           456
           789

⇒

           "123",
           "456",
           "789",
</pre>
        </div>
      </div>



    </div>

  </div>
</body>

body {
  height: 100%;
  width: 560px;
  margin: auto;
  font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
  //arial;
}

#wrap {
  width: 100%;
  position: relative;
  min-height: 100%;
}

.contents {
  padding-bottom: 30px;
}

.leftContents,
.rightContents {
  float: left;
}

.category {
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  color: #68217A;
  margin-left: 20px;
}


/*Insert*/

textarea.insert {
  width: 232px;
  height: 7em;
  //line-height:150%;
  margin-left: 20px;
}

#result {
  margin-top: 48px;
}

.action {
  margin-left: 20px;
}

.col-txt {
  float: left;
  width: 60px;
  margin-left: 25px;
  font-size: 18px;
  font-weight: bold;
  color: #555;
}

.col-val {
  float: left;
  width: 200px;
}

.clear {
  clear: both;
}