При щелчке по добавлению текста с помощью кнопки в поле ввода с jQuery или JS

Question

Я код, когда я нажимаю кнопку, со значением = "first_name", объявляет значение кнопки, как тегов, список с классом = "теги".

Как я могу изменить текст дисплея на кнопке, чтобы текст на кнопке был «Добавить тег», и когда я нажимаю кнопку, чтобы добавить текст «first_name» в списке?

HTML

<input class="btn btn-info attribute-button" name="commit" readonly="readonly" type="button" value="first_name" /> 
<input class="btn btn-info attribute-button" name="commit" readonly="readonly" type="button" value="second_name" /> 



<div class="tags" contenteditable="false"> 
    <input class="newtag" type="text" name="newtag" readonly="readonly" placeholder="Add tags" /> 
</div> 

CSS

.tags { 
width: 100%; 
height: 60px; 
border: 0px solid #fff; 
border-radius: 4px; 
margin: 0 0 25px; 
padding: 19px 0 0 20px; 
font-size: 14px; 
background-color: #fff; 
background-image: none; 
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 
overflow-x: hidden; 
} 
.tag { 
padding: 1px; 
background-color: blue; 
color: #fff; 
border-radius: 3px; 
display: inline-block; 
} 
.newtag { 
border: none; 
outline: none !important; 
} 
.tag .remove { 
margin-left:5px; 
color: #aaa; 
cursor:pointer; 
font-size:10px; 
} 

JS

$(document).ready(function(){ 
$(".tags, .attribute-button").click(function(){ 
    $(".newtag").focus(); 
}) 
$(".newtag").keydown(function(e){ 
    if(e.which === 13 || e.which === 32 || e.which === 9){ 
     e.preventDefault(); 
     $(".newtag").before("<div class='tag'>" + $(this).val() + "<span class='remove'>X</span></div>"); 
     $(".newtag").val(""); 

    } 
}); 
$(".attribute-button").click(function() { 
    $(".newtag").before("<div class='tag'>" + $(this).val() + "<span class='remove'>X</span></div>"); 

    $('.remove').on('click', function() { 
     $(this).parent().remove(); 
    }); 
}); 
}); 

Спасибо.

Answer 1

Вы могли бы просто использовать родной HTML button элемент вместо input type="button":

<button class="btn btn-info attribute-button" value="first_name">Add tag</button> 
<button class="btn btn-info attribute-button" value="second_name">Add another tag</button> 

JSfiddle