Q:

how to receive result with span tag in my calculator

I'm writing a calculator in JavaScript: https://jsfiddle.net/or0sexp1/
I want to edit this calculator so that when the = button is pressed the output is added to my #history div
I currently have the following onclick event on the = button:
$("#equal").click(function(){
    var str = $("#history").text();
    var re = /[0-9]+/g;
    var re2 = /[0-9]+(.)[0-9]+/;
    var operands = str.match(re);
    var Operation = str.match(re2)[1];
    var A = operands[0];
    var B = operands[1];
    var Result = operands[2];
});

I want the #history output to be wrapped in <span> elements. 
For example, if the input is 5-1=4 I want the #history div to be updated like:
<span id="A">5</span>
<span id="Operation">-</span>
<span id="B">1</span>
<span>=</span>
<span id="Result">4</span>

My current output looks like this:
"5-1="
<span id="Result">4</span>

I'm trying to achieve this without using REGEX

A:

I have done some changes to your code.
$("#equal").click(function() {
    str = $("#history1").text();

    var re = /[0-9]+/g;
    var re2 = /[0-9]+(.)[0-9]+/;
    var operands = str.match(re);
    var Operation = str.match(re2)[1];
    var A = operands[0];
    var B = operands[1];
    var Result = operands[2];
    $("#history").append('<span id="A">' + operands[0] + '</span><span id="Operation">' + Operation + '</span><span id="B">' + operands[1] + '</span>=<span id="Result">' + $("#bar").val() + '</span>');
});

Demo Fiddle
I have created a calculator with a much cleaner way. 
var operators = [];
$(".numbers,.operators,.dot").click(function() {
    $("#bar").val($("#bar").val() + $(this).val());
});
$(".operators").click(function() {
    operators.push($(this).val());
});
$("#equal").click(function() {
    var resultString = $("#bar").val();
    for (i = 0; i < operators.length; i++) {
        var div = $("<div/>");
        var firstIndex = resultString.indexOf(operators[i]);
        div.append("<span class='number'>" + resultString.substring(0, firstIndex) + "</span>");
        div.append("<span class='operator'>" + operators[i] + "</span>");
        resultString = resultString.substring(firstIndex + 1);
        operators.splice(i, 1);
    }
    div.append("<span class='number'>" + resultString + "</span>");
    div.append("<span>=</span>");
    $("#bar").val(eval($("#bar").val()));
    div.append("<span class='result'>" + $("#bar").val() + "</span>");
    $("#history").append(div);
});

Fiddle without using regex

