Rsa97

RTFM

Жуть какая.

function alphabetPosition(text) {
  return text.toUpperCase().replace(/([A-Z])/g, function(char) { 
    return char.charCodeAt(0) - 64;
  });
}

Так у вас фигурные скобки непарные. Открывающих четыре, а закрывающих - три.
Неужели в консоли браузера не было сообщений об ошибках в скрипте?
P.S. И вместо onreadystatechange написано onereadystatechange

Никак. Регулярные выражения не предназначены для разбора вложенных конструкций.

Судя по ответу сервера подозреваю, что вы пробегаете по этому массиву и для каждого product_id ищете элемент в DOM.
Может оказаться гораздо быстрее, если сервер отдаст ответ как один объект
{'product_id' : 'count', 'product_id' : 'count}
В таком случае можно сразу найти в DOM коллекцию нужных элементов и по их product_id брать count из объекта.

А почему просто не использовать contenteditable?

Потому что вы изменяете не исходный текст страницы, а уже сформированное DOM-дерево. При добавлении тэга <table> браузер встраивает его в дерево автоматически закрывая завершающим </table>. Соответственно, следующие добавления идут после узла table.

toFixed возвращает строку. RTFM.

var res = JSON.parse(data);
var name = Object.keys(res)[0];
var select = res[name].reduce(function(prev, cur, index) {
  return (prev+'<option value="'+cur+'">'+(index+1));
} , '<select name="'+name+'">') + '</select>';

Примерно так. Нужные id и классы подставьте сами.

$('#id_элемента_с_карандашом/галочкой').click(function() {
  var input = $('#id_инпута');
  if (input.prop('disabled')) {
    input.prop('disabled', false);
    $(this).removeClass('icon-карандаш').addClass('icon-галочка');
  } else {
    input.prop('disabled', true);
    $(this).removeClass('icon-галочка').addClass('icon-карандаш');
  }
});