JSFiddle - React, Tailwind, and code Playground

HTML

<div class="reply-box" style="margin: 0 auto;">
  <div class="controls"> 
    <div style="margin-bottom: 20px;" class="entry input-group">
      <textarea class="form-control newreply" name="reply[]" type="text" placeholder="Add Reply"></textarea>
      <span class="input-group-btn">
        <button class="btn btn-success btn-add" type="button">
          <span class="glyphicon glyphicon-plus">Add more reply</span>
        </button>
      </span>
      <br>
      <div class="checkbox-type1">
        One <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="1">         
        Two <input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="2">
        Three<input class="to_char_id_type1" type="checkbox" name="to_char_id_type1[]" value="3">
				<input type="text" value="" name="getID_type1[]" class="getID_type1">
			</div>
    </div>
  </div>
</div>

JavaScript

$(function() {
			$(document).on('click', '.btn-add', function(e)
			{
				e.preventDefault();

				var controlForm = $('.controls'),
					currentEntry = $(this).parents('.entry:first'),
					newEntry = $(currentEntry.clone()).appendTo(controlForm);

				newEntry.find('textarea').val('');
				controlForm.find('.entry:not(:last) .btn-add')
					.removeClass('btn-add').addClass('btn-remove')
					.removeClass('btn-success').addClass('btn-danger')
					.html('<span class="glyphicon glyphicon-minus">Remove</span>');
			}).on('click', '.btn-remove', function(e)
			{
				$(this).parents('.entry:first').remove();

				e.preventDefault();
				return false;
			});
		});
    
    
    
    $(".checkbox-type1 > .to_char_id_type1").change(function () {
				var newArr = $(".to_char_id_type1:checked").map(function () { return this.value; });
				$(".getID_type1").val(newArr.get().join(","));
			});