How to highlight different search results with mark.js?

Question

My goal

I have a text in a HTML page, and I want to be able to use two different search boxes on it, using mark.js. The first search box should highlight matching words in a color, and the second box should highlight matching results in a different color.

What I have tried

I have the following code :

CSS :

mark {
  padding: 0;
  background-color:yellow;
}

jQuery :

$(function() {
  var mark = function() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();
    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".context").unmark({
      done: function() {
        $(".context").mark(keyword);
      }
    });
  };
  $("input[name='keyword']").on("input", mark);
});

HTML :

<input type="text" name="keyword">
<div class="context">
The fox went over the fence
</div>

Working JSFiddle : JSFiddle.

My problem is that I don't know how to add a second search box without duplicating the JavaScript code ; and when I do, the search in the second search box erases the highlight from the search in the first search box.

I have found the following thread that seems to solve my problem (I had to delete this link because I do not have enough rep to post more than two links), but I get a 404 Error when I try to access the JSFiddles.

How can I add a second search box that allow me to have results of the first search box in a color and the result of the second search box in another color, without having one search erasing the other ?

EDIT

From the answer I got, I believe I did not ask cleary my question. So here is a "half working" JSFiddle, where you can see the two search boxes I need. If I search 'fox' in the first search box and then 'fence' in the second ; 'fox' is not highlighted anymore, but 'fence' is. I would like both to stay highlighted, with different colors. I really don't have a clue how to do this.

Answer 1

My previous answer was for two boxes and one input, but this answer is one box and two inputs, as you requires. I don't remove the previous answer if someone needs that solution

This new solution requires a classname, I called .secondary. See the code:

https://jsfiddle.net/1at87fnu/55/

$(function() {
  var mark = function() {
    // Read the keyword
    var keyword = $("input[name='keyword']").val();
    var keyword2 = $("input[name='keyword2']").val();
    // Remove previous marked elements and mark
    // the new keyword inside the context
    $(".context").unmark({
      done: function() {
        $(".context").mark(keyword).mark(keyword2, {className: 'secondary'});
      }
    });
  };
  $("input[name^='keyword']").on("input", mark);
});

And the CSS

mark {
  padding: 0;
  background-color:yellow;
}
mark.secondary {
  padding: 0;
  background-color: orange;
}

You can see on the javascript that I called twice to mark() function, and on the second call I add a className. You can see more options for mark.js here:

https://markjs.io/#mark

This is a screenshot with the final result:

Answer 2

Just add it on your selector:

https://jsfiddle.net/1at87fnu/49/

  $(function() {
    var mark = function() {
      // Read the keyword
      var keyword = $("input[name='keyword']").val();
      // Remove previous marked elements and mark
      // the new keyword inside the context
      $(".context, .context2").unmark({
        done: function() {
          $(".context, .context2").mark(keyword);
        }
      });
    };
    $("input[name='keyword']").on("input", mark);
  });

html

<input type="text" name="keyword">
<div class="context">
    The fox went over the fence
</div>
<div class="context2">
    The fox went over the fence
</div>

Thanks to jQuery recursive selectors, you can add all selectors you want by comma separated:

$('.one, #two, three[disabled]')

And so on.

UPDATE

With CSS you can apply different colors between boxes. Just target the box you are using, like this CSS:

https://jsfiddle.net/1at87fnu/50/

mark {
  padding: 0;
  background-color:yellow;
}
.context2 mark {
  padding: 0;
  background-color: orange;
}