<input class="add-prod" value="699"> <!--Valores a sumar-->
<input class="add-prod" value="899"> <!--Valores a sumar-->
<input class="add-prod" value="999"> <!--Valores a sumar-->

<div class="cont-num" id="clicks">0</div> <!--Contador de clicks-->
<div class="cont-num" id="clicksdos">0</div> <!--Contador de clicks-->

<!--Aquí se suman los inputs-->

<div id="cont-resultado">
<input name="total" id="total" type="num" readonly="readonly">
</div>

<!--El siguiente div es el botón que realiza las funciones-->

<div class="comp-clone" id="comp-p1" data-clone="cont-p1">Comprar</div>

let clicks = 0;
let clicksdos = 0;

const safeInt = (key) => {
  let value = parseInt(getValue(key));
  return (isNaN(value) || value < 0) ? 0 : value;
}

// This loads our clicks from the LocalStorage
const loadClicks = () => {
  clicks = safeInt('clicks');
  clicksdos = safeInt('clicksdos');
}

const loadHTML = () => {
  return getValue('html', '');
}

const loadFromStorage = () => {
  let html = loadHTML();
  if(html !== '') {
    loadClicks();
  }
  displayClicks();
  document.querySelector(".contenido").innerHTML = html;
}

// Display the clicks on the screen
const displayClicks = () => {
    clicks = (clicks === NaN) ? 0 : clicks;
    clicksdos = (clicksdos === NaN) ? 0 : clicksdos;
    document.querySelector('#clicks').innerHTML = clicks;
    document.querySelector('#clicksdos').innerHTML = clicksdos;
    // Hide / Show Result
    let display = (clicks > 0) ? 'block' : 'none';
      document.querySelector(".contenido").style.display = "display";
}

const adjustClicks = (value) => {
  clicks +=value;
  clicksdos +=value;
  storeValue('clicks', clicks);
  storeValue('clicksdos', clicksdos);
  displayClicks();
}

const addClick = () => adjustClicks(1);
const removeClick = () => adjustClicks(-1);

// Manage localStorage
const storeValue = (key, value) => (localStorage) ? localStorage.setItem(key, value) : '';
const getValue = (key, defaultValue) => (localStorage) ? localStorage.getItem(key) : defaultValue;
const storeHTML = () => storeValue("html",document.getElementsByClassName("contenido")[0].innerHTML);

// Add a node to the Derecha
const addToDerecha = (nodeId) => {
  let node = document.querySelector(`#${nodeId}`);
  document.querySelector('.contenido').appendChild(node.cloneNode(true));
  storeHTML();
  displaySuma();
};

// Monitor ALL click events
document.addEventListener('click', (event) => {
  let target = event.target;

// Add
  if(target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
  }

  // Remove
  if(target.matches('.bbp')) {
    removeClick();
    getParent('.contenido', target).removeChild(target.parentNode);
    storeHTML();
    displaySuma();
  }
});

// This is just a helper function.
const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();

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

// Code to run when the document loads.
document.addEventListener('DOMContentLoaded', () => {
  if(localStorage) {
      loadFromStorage();
  }
  displaySuma();
});