Performing checkbox checking with jquery

Question

I would like to know how I can complement the code below to have how to return values in checkbox mode the problem and that I need this check to be performed in the following way keep the array position created at the time of marking the items following the order of values shown in the same position within the textarea as well as the number that appears on the side of the marked items showing the positions in which they were selected.

The reason for this is that I have two areas one that sends the checkbox values to the database and the other the edit mode that returns the values contained within the database, the problem is that as this code generates array position for the marked items when returning the selected values contained within the database this script is not returning the positions of the array of items in the check mode and even putting checkbox values not inserts these values within the textarea as well as their markup positions created when you have an item marked in the checkbox.

var listCheckedOptions = [];
function addToList(checkObj, outputObjID) {
  //Remove do array caso o elemento já esteja inserido
  if (listCheckedOptions.indexOf(checkObj) >= 0) {
    listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj), 1);
  } else {
    if (listCheckedOptions.length >= 2) {
      alert("Máx 2 Elemenos selecionados");
      return checkObj.checked = false;
    }
    listCheckedOptions.push(checkObj);
  }

  document.getElementById(outputObjID).value = ""; //Limpa o textarea
  document.getElementById(outputObjID).value = listCheckedOptions.map(function (o) {
    return o.value;
  }).join('\r\n'); //Adiciona no textarea
  if (!checkObj.checked) checkObj.nextSibling.querySelector('span').innerHTML = '';
  listCheckedOptions.forEach(function (el, i) {
    var span = el.nextSibling.querySelector('span').innerHTML = i + 1;
  });

  return;
}

  <form name="myform">
<input type="checkbox" name="fruit[]" value="Oranges" onClick="addToList(this, 'txt1')"><font color="#808080">Oranges <span></span></font>

<br>
<input type="checkbox" name="fruit[]" value="Apples" onClick="addToList(this, 'txt1')"><font color="#808080">Apples <span></span></font>

<br>
<input type="checkbox" name="fruit[]" value="Grapes" onClick="addToList(this, 'txt1')"><font color="#808080">Grapes <span></span></font>

<br>
<textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080" readonly></textarea>
</form>

Answer 1

see if the code below is what you want.

var frutas = document.getElementsByName("fruit[]");
var txt1 = document.getElementById("txt1");

frutas = [].slice.apply(frutas);
var listCheckedOptions = frutas.filter(function (fruta, indice) {
    return fruta.checked;
}).sort(function (fruta, indice) {
    return fruta.dataset.order;
});


function addToList(checkObj, outputObj) {
  //Remove do array caso o elemento já esteja inserido
  if (listCheckedOptions.indexOf(checkObj) >= 0) {
    listCheckedOptions.splice(listCheckedOptions.indexOf(checkObj), 1);
  } else {
    if (listCheckedOptions.length >= 2) {
      alert("Máx 2 Elemenos selecionados");
      return checkObj.checked = false;
    }
    listCheckedOptions.push(checkObj);
  }
  
  if (!checkObj.checked) {
    checkObj.parentNode.querySelector('span').innerHTML = '';  
    delete checkObj.dataset.order;
  }
  return updateValores(outputObj);
}

var updateValores = function (outputObj) {
  outputObj.value = ""; //Limpa o textarea
  outputObj.value = listCheckedOptions.map(function (o) {
    return o.value;
  }).join('\r\n'); //Adiciona no textarea  
  
  listCheckedOptions.forEach(function (fruta, indice) {
    var span = fruta.parentNode.querySelector('span');
    fruta.dataset.order = indice + 1;
    span.innerHTML = indice + 1;
  });

  return;
}

frutas.forEach(function (fruta, indice) {
  fruta.onclick = function () {
    addToList(this, txt1);
  };
});
updateValores(txt1);

<form name="myform">  
  <label>
    <input type="checkbox" name="fruit[]" value="Oranges" data-order="2" checked />  
    <font color="#808080">Oranges</font>
    <span></span>
  </label><br>
  <label>
    <input type="checkbox" name="fruit[]" value="Apples" />
    <font color="#808080">Apples</font>
    <span></span>
  </label><br>
  <label>
    <input type="checkbox" name="fruit[]" value="Grapes" data-order="1" checked />
    <font color="#808080">Grapes</font>
    <span></span>
  </label><br>
  <textarea rows="4" cols="10" name="txt1" id="txt1" style="color:#808080"  readonly></textarea>
</form>