Javascript - Show div only if input value is greater than 999

add this

$('.comp-clone').on('click',function(){
    if($('#total').val() > 999) {
        $('#regalo').show();
    }
    else{
        $('#regalo').hide();
    }
})

You arent checking if the input field changes you are checking if you change it

$(document).ready(function(){
    if($('#total').val() > 999 ) {
         $('#regalo').show();
    }
    $('#total').on('change',function(){
        if($(this).val() > 999 ) {
            $('#regalo').show();
        }
        else{
            $('#regalo').hide();
        }
    })
    $('.comp-clone').on('click',function(){
        if($('#total').val() > 999) {
            $('#regalo').show();
        }
        else{
            $('#regalo').hide();
        }
    })
})

That should work for you but if you wanted to clean that up a little

$(document).ready(function() {
    CheckTotal();
    $('#total').on('change', function () {
        CheckTotal();
    })
    $('.comp-clone').on('click', function () {
        CheckTotal();
    })
})

CheckTotal() {
    if ($('#total').val() > 999) {
        $('#regalo').show();
    }
    else {
        $('#regalo').hide();
    }
}

I reviewed the code you posted and you have two major issues.

Never try adding more code without understanding the code already written.

It's a common thing that we start writing some code before even understanding the whole code already written, and this is a big problem since it could cause the other code to not work. I'll give you the example with your issue. Something that is preventing your code to give you the result you are expecting is that in the code previously written, the function that assings the valute to the input with id of total is converting the input to a string with String.toLocaleString() which converts totally the variable type from integer (which is what your are looking for) to a string.

Here is where this happens in the code:

const displaySuma=()=>document.getElementById("total").value=suma().toLocaleString("es-ES");

const suma = function() {
  return Array.from(document.querySelectorAll(".derecha div .add-prod"))
    .reduce((a, v) => a + parseFloat(v.value), 0);
}

So, to achieve the functionality you want, you need to remove the last function attached to the sum() function. It will be like this:

const displaySuma=()=>document.getElementById("total").value=suma();

Also, there's no need to add extra event listeners to your mini-app. Like I said, just try to give it a little of research before writing more code, if you do this, you'll be writing JavaScript code easily and understand how it works by the time you achieved your goal of modifying an already written piece of code.

There is already an event listening for the value in the code.

Since the script already has an event listening for the #total value change, we can just create a function and check the condition there. Here is the event listening:

document.addEventListener('click', (event) => {
  let target = event.target;
  // Add
  if (target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
    verifyCondition(); //We add our own function that we just made to verify the value.
  }
  // Remove
  if (target.matches('.bbp')) {
    removeClick();
    getParent('.derecha', target).removeChild(target.parentNode);
    storeHTML();
    displaySuma();
  }
});

And now, our function would simply be: (Vanilla JavaScript)

const verifyCondition = () =>{
    let total = Number(document.querySelector("#total").value);
    //We convert the value to integer anyways to prevent any kind of errors.
    if( 999 < total && total < 1200 ){//Check if value is between 999 and 1200
        document.getElementById("regalo").style="display:block;";
    }else{
        document.getElementById("regalo").style="display:none;";
    }
}

And that's it! Here is a fiddle with the new working code, try to give it a check and make sure to search for what you don't understand. That's how any Senior Developer started.

https://jsfiddle.net/ax0L12j7/