Bootstrap list views with badges as links

I’m using a Bootstrap list-group containing recently-used search criteria. The user can click a search criteria set in order to re-run the search. However, this wasn’t good enough for the users, because they wanted (reasonably enough) to tweak their search criteria, so I figured that the smart thing to do would be to add a badge to the list-group-items with the caption “edit”. Clicking this would bring up the search criteria editor, and they could tweak to their hearts’ content. Something that looks like this:

Problem #1: the list-group-item was an anchor element, and these can’t be nested, so I couldn’t put the new “edit” anchor inside the badge.

Problem #2: I didn’t want to make the human-readable version of the search into a link because that way, the link wouldn’t cover the whole width of the list-group-item.

What I ended up doing in the PHP was this (I’m using Yii2):

<div class="list-group">
  <?php
  foreach ($recentSearches as $search)
  {
    $edit = Html::a('edit', $search->editUrl);
    $badge = Html::tag('span', $edit, [
      'class' => 'badge',
    ]);

    $clickableCond = Html::tag('div', $search->hrConditions, [
      'condhash' => $search->cond_hash,
    ]);

    echo Html::tag('span', $badge . $clickableCond, [
      'class' => 'list-group-item',
    ]);
  }
  ?>
</div>

This produced a structure that looks like this (roughly):

<div class="list-group">
  <span class="list-group-item">
    <span class="badge">
      <a href="/properties/search?condhash=9fe8">edit</a>
    </span>
    <div condhash="9fe8">
      District EQUALS DISTNAME<br>
      AND Street name CONTAINS STREETNAME<br>
      AND Suburb EQUALS SUBURBNAME<br>
      AND Cancelled = NO
    </div>
  </span>
</div>

With the judicious application of the following styles and script, I achieved what I was looking for.

<style>
span.list-group-item span.badge a {
    color: white;
}
span.list-group-item span.badge a:hover {
    text-decoration: none;
}
span.list-group-item {
    color: #555;
}
span.list-group-item:hover {
    background-color: #f5f5f5;
    cursor: pointer;
}
</style>

<script>
$(document).ready(function() {
  var sel = 'span.list-group-item div[condhash]';
  $(sel).unbind().bind('click', function(evt) {
    var url1 = "/properties/index?condhash=";
    var url2 = $(this).attr('condhash');
    window.location.href = url1 + url2;
    return false;
  });
});
</script>