[SOLVED] Make two bootstrap tagsinputs have different icons to remove them

Make two bootstrap tagsinputs have different icons to remove them

I'm using bootstrap tagsinput (https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/) to collect keywords from a user. I have two keyword boxes and want to change the icon next to each word. Limited css experience.

The code:

var elt = $('#collection');
elt.tagsinput({ itemValue: 'id', itemText: 'text' });
var elt = $('#suggestions');
elt.tagsinput({ itemValue: 'id', itemText: 'text' });

    .bootstrap-tagsinput .tag [data-role="remove"]:after {
        content: "x";
    }

<div class="col-sm-12">
  <div class="row">
    <!-- Keyword Collection -->
    <div class="form-group col-sm-6">
      <label for="name2" class="control-label">Your Keywords</label>
      <div>
        <input id="collection" type="text" name="keywords" />
      </div>
    </div>
    <!-- Suggestions -->
    <div class="form-group col-sm-6">
      <label for="name2" class="control-label">Keyword Suggestions</label>
      <div class="keyword">
        <input class="suggestions" type="text" id="suggestions" />
      </div>
    </div>
  </div>
</div>

I have tried to layer it by the class but can't separate it out -

.keyword .suggestions .bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "+";
}

Any advice?

Solution

Needed to separate them out with an id - maybe this could help someone else

  #keyword_inputs .bootstrap-tagsinput .tag [data-role="remove"]:after{
      content: "  x";
  }

  #keyword_suggestions .bootstrap-tagsinput .tag [data-role="remove"]:after{
      content: "  +";
  }