Добавление нескольких строк во входное поле с помощью нескольких кнопок

Question

Я пытаюсь добавить несколько строк в поле ввода с помощью нескольких кнопок. Проблема в том, что каждый раз, когда я нажимаю новую кнопку, она заменяет/переопределяет предыдущую вставку, поэтому я не могу добавить строки только для замены.

также хотел бы, чтобы удалить строку, если на ту же кнопку повторно щелкнул

Пожалуйста, смотрите ниже код и скрипку - http://jsfiddle.net/2khzX/

<input type="text" id="text" style="width: 450px;" /> 
<br /> 
<button>Hello</button> 
<button>Yes</button> 
<button>No</button> 
<button>Maybe</button> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script> 
<script> 
    $("button").on('click', function() { 
    var text = $(this).text(); 
    $("input").val(text + ','); 
    }); 
</script> 

Answer 1

Сначала получите значение с существующего входа.

Затем проверьте, существует ли текущий текст. Если да, то избавитесь от него.

Затем добавьте текущий текст в конец.

$("button").on('click', function() { 
    var text = $(this).text() +','; 
    $('input').val(function(_, val) { 
     if (val.match(text)) { 
      return val.replace(text, ''); 
     } 
     return val + text; 
    }); 
}); 

jsFiddle

Answer 2

Добавьте значение, которое уже на входе, а также, в противном случае он просто заменяет все, что там с новым значением

$("button").on('click', function() { 
    var text = $(this).text(); 

    $("input").val(function(_, val) { 
     var arr = val.split(','), 
      pos = $.inArray(text, arr); 

     pos != -1 ? arr.splice(pos, 1) : arr.push(text); 

     return arr.filter(function(n) { 
      return n.trim().length 
     }).join(','); 
    }); 
}); 

FIDDLE