Textarea to Multiline control

How to use

<!-- Add textarea -->
<textarea class="form-control multiline-control"></textarea>

<!-- Include jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Include plugin file -->
<script src="js/multiline-control.min.js"></script>
<!-- Initialize plugin for .multiline-control class elements -->
<script>
   jQuery(function ($) {
      $('.multiline-control').multiline_control();
   });
</script>

Full options list (default values)

      $('.multiline-control').multiline_control({
         sortable: true,
         templateContainer: '<div class="multiline-control"></div>',
         templateAddBtn: '<a href="#" class="mc-add-btn btn btn-success btn"><i class="glyphicon glyphicon-plus"></i></a>',
         templateLine:
            '<div class="form-group mc-row">' +
               '<div class="input-group">' +
                  '{sorting_handle}' +
                  '<input type="text" class="form-control" name="{name}" value="{value}">' +
                  '<a href="#" class="input-group-addon btn btn-default btn-sm mc-remove-btn">' +
                     '<i class="glyphicon glyphicon-remove"></i>' +
                  '</a>' +
               '</div>' +
            '</div>',
         templateHandle: '<div class="input-group-addon mc-handle" style="cursor: move;"><i class="glyphicon glyphicon-move"></i></div>',
         templateSortablePlaceholder: '<div class="mc-sortable-placeholder form-group form-control" style="border: 1px dashed blue;"></div>',
         onChange: $.noop
      });

Validation support

This plugin supports vallidation based on https://jqueryvalidation.org/ with following settings:

$('#test_form').validate({
   onkeyup: function (element) { $(element).valid() },
   rules: {
      'emails_mc[]': 'email',
   },
   highlight: function(element) {
      $(element).closest('.form-group').addClass('has-error');
   },
   unhighlight: function(element) {
      $(element).closest('.form-group').removeClass('has-error');
   },
   errorElement: 'span',
   errorClass: 'help-block',
   errorPlacement: function(error, element) {
      if(element.parent('.input-group').length) {
         error.insertAfter(element.parent());
      } else {
         error.insertAfter(element);
      }
   },
});