My Custom jsColor onfinechange function resets colors when clicking from background to color

Question

So I have been working on my own "onfinechange" function and I have run into a bug that I just can not see why it is happening.

What I Expect

I want to be able to change the background or color of a div with jscolor and keep the color.

What is Happening

For Example: If I click in and change the background color, then try to click in and change the text color it kicks the background color back to the original color. This works visa-versa.

I cut out a sample of the bigger picture and documented it to make what is happening more clear.

The problem clearly lives in the jQuery somewhere, it's probably something tiny I am overlooking.

$(document).ready(function () {
    $('input').on('click', function (ev) {
        var inputPiece = $(this);
        var value = $(this).val(); //what in the input box that was clicked
        var clazz = $(this).attr('data-c'); //the div to change
        var bORc = $(this).attr('data-d'); //is it a background or color
        $('div').on('mousemove', function () {
            value = $(inputPiece).val(); //if the mouse is moving check the input value
        });
        var checkColor = setInterval(function () {

            if (bORc === 'b') {// if we are changing background
                $(clazz).attr("style", "background: #" + value + ' !important');
            }
            if (bORc === 'c') {//if we are changing color
                $(clazz).attr('style', 'color: #' + value + ' !important');
            }
        }, 50);
        $('input').on('blur', function () {
            clearInterval(checkColor);// shut down the interval
        });
    });
});

#fot {
  float:right;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<input type="text" data-t="" data-c="#fot" data-d="c" class="jscolor" name='footer_color' id='footer_color' value="FFF" />
<input type="text" data-t="" data-c="#fot" data-d="b" class="jscolor" name='footer_background' id='footer_background' value="FFF" />
<div id="fot">text</div>

Answer 1

The issue is you're writing to a the style attribute directly, this means you are wiping out all other information inside the style. However, if you use jQuery's .css you should avoid overriding previously set style information.

$(document).ready(function () {
    $('input').on('click', function (ev) {
        var inputPiece = $(this);
        var value = $(this).val(); //what in the input box that was clicked
        var clazz = $(this).attr('data-c'); //the div to change
        var bORc = $(this).attr('data-d'); //is it a background or color
        $('div').on('mousemove', function () {
            value = $(inputPiece).val(); //if the mouse is moving check the input value
        });
        var checkColor = setInterval(function () {

            if (bORc === 'b') {// if we are changing background
                $(clazz).css("background", '#' + value);
            }
            if (bORc === 'c') {//if we are changing color
                $(clazz).css("color", '#' + value);
            }
        }, 50);
        $('input').on('blur', function () {
            clearInterval(checkColor);// shut down the interval
        });
    });
});

#fot {
  display:inline-block;
  font-size:40px;
  background-color:black;
  color:red;
  margin:10px;
  padding:10px;
}

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.js"></script>
<div id="fot">text</div><br />
<input type="text" data-t="" data-c="#fot" data-d="c" class="jscolor" name='footer_color' id='footer_color' value="FFF" />
<input type="text" data-t="" data-c="#fot" data-d="b" class="jscolor" name='footer_background' id='footer_background' value="FFF" />