JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="checkboxstyle"  id="id_peer_educator" value="Peer Educator"/>Peer Educator<br>
<input type="checkbox" class="checkboxstyle"  id="id_chw" value="CHW"/>CHW<br>
<input type="checkbox" class="checkboxstyle"  id="id_health_provider" value="Health Prvider"/>Health Provider<br>
<input type="checkbox" class="checkboxstyle"  id="id_purchase" value="Purchase"/>Purchase<br>
<input type="text" id="CD_Supplr" class="CD_Supplr" name="CD_Supplr" placeholder="Suppliers :"/>

CSS

input[type="text"]{
    width: 400px;
}

JavaScript

$(function(){
    var $target = $('#CD_Supplr');
	$('[type="checkbox"]').change(function(){
        if($target.val() == ''){
            $target.val('Supplier: ');
        }
        if(!$target.val().match($(this).val())){
            var text = $target.val();
            $target.val(text + $(this).val() + ', ');
        } else {
            var text = $target.val();
            $target.val(text.replace($(this).val()+', ', ''));
        }
        //make sure the last comma is removed
        $target.val($target.val().replace(/\,$/, ''));
    });
});