JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="input_8_3" value="3014,3015,3016,3017,3018" class="form-control data_lable">

<input type="text" id="input_8_4" readonly="" value="3014,3015,3016,3017,3018" class="form-control data_lable">

<div class="user-profile-avatar user_seting st_edit">
<div>
<div class="thumbn" id="img-act-3014">img-act-3014</div>
<div class="thumbn" id="img-act-3015">img-act-3015</div>
<div class="thumbn" id="img-act-3016">img-act-3016</div>
<div class="thumbn" id="img-act-3017">img-act-3017</div>
<div class="thumbn" id="img-act-3018">img-act-3018</div>
</div>

CSS

.thumbn {
    width: 85px;
    height: 85px;
    background: #7ef369;
    float: left;
    margin: 10px;
}
.chosen-img.thumbn{background:#727272}
input{width:100%}
.comment{width: 100%;
    display: inline-table;}

JavaScript

var array = [];
var array1 = $('#input_8_3').val().split(',');
$("#input_8_3").val(array.join());

(function($){
$('div.thumbn').click(function() {
	var text = $(this).attr("id").replace('img-act-','');
  var oldtext = $('#input_8_3').val();
	if ($(this).hasClass('chosen-img'))
  {
  
    $('#input_8_3').val(text+oldtext);  	
  	var index = array.indexOf(text);
    if (index !== -1)
    {
    	array.splice(index, 1);
    }
		
    array1.push(text);
  	$(this).removeClass('chosen-img');
  }
  else
  {
  	array.push(text);
  	var index = array1.indexOf(text);
    if (index !== -1)
    {
    	array1.splice(index, 1);
    }
    $(this).addClass('chosen-img');
  }
  $("#input_8_3").val(array.join());
  $("#input_8_4").val(array1.join());
  console.log(array1);
});
})(jQuery);