JSFiddle - React, Tailwind, and code Playground

by Nikhil krishnan

HTML

<select name="" id="">
  <option>Question 1</option>
  <option>Question 2</option>
  <option>Question 3</option>
</select>
<div class="row">
  <input type="text" placeholder="Add your question 1">
  <button class="save-btn">Save</button>
</div>
<div class="row">
  <input type="text" placeholder="Add your question 2">
  <button class="save-btn">Save</button>
</div>
<div class="row">
  <input type="text" placeholder="Add your question 3">
  <button class="save-btn">Save</button>
</div>

<div class="update">
  
</div>

CSS

select{
  width: 200px;
  height: 40px;
}
.row{
  margin-top: 10px;
}

.update{
  background-color: orange;
  padding: 10px;
  color: #333;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  margin-top: 20px;
}

JavaScript

$('button').click(function(){
  var input = $(this).parent().find('input');
  var iValue = input.val();
	if($(this).hasClass('save-btn')){
    if(iValue.length > 0){
      //console.log(iValue.length);
      $('.update').append(iValue + ' ');
      $(this).removeClass('save-btn').text('Delete');
      input.prop('disabled', true);
    }
  }
  else{
    var content = $('.update').text(),
        identifier = content.split(' '),
        deleteItem = $(this).parent().find('input').val();
    for( var i = 0 ; i < identifier.length; i++ ){
    	if( identifier[i] == deleteItem ){
        console.log(deleteItem);
        var elem = $(".update:contains('" + deleteItem + "')");		
				elem.text(elem.text().replace(deleteItem, ""));
      }
    }
  	$(this).parent().remove();
  }
});