Как вставить элементы Dynami c HTML в базу данных, используя PHP?

Question

У меня проблемы с отправкой формы HTML. Форма позволяет пользователю добавлять навыки на страницу HTML с помощью кнопки. Эти вновь созданные навыки затем необходимо вставить в базу данных. Проблема в том, что я могу вставить только один навык за раз. Навыки вводятся в виде флажков, и все проверенные умения должны быть занесены в базу данных. Я думаю, что моя проблема в том, что каждый созданный флажок динамически использует одну и ту же переменную $ skill_name, но это не проблема, когда я беру существующие навыки из базы данных для отображения. Я добавил ajax, чтобы попытаться сохранить каждый навык в операторе post по мере его создания, но это не помогает, когда я на самом деле go вставляю. Оператор INSERT выглядит примерно так:

if(!empty($_POST["backend"])){

    $backend = $_POST["backend"];


    $sql2 = "INSERT INTO skill (skill_cat_id, skill_name) VALUES (?,?)";
    $skill_cat_id = 1;

    for ($i = 0; $i < count($backend); $i++){
        $skill_name = $_POST["skill_name"];
        if($stmt = $mysqli->prepare($sql2)){
        $stmt->bind_param("is", $skill_cat_id, $backend[$i]);
        if ($stmt->execute()) {

            echo "<script>
            alert('Success!'); 
            </script>";
        }
        else{
            echo "<script>
            alert('Failure!');

            </script>";
        }
        }
    }
}

И HTML для выглядит так:

     <h5>Backend Technologies </h5>
            <div class="container">
            <div id = "backendDiv">
            <?php
            $backend=getbackendtech();
            while($row = $backend -> fetch_assoc()) {
            //    echo "<input type='checkbox' value='{$data['skill_name']}'>". $data['skill_name'];
            echo "<div class=\"list-group-item checkbox\" id = \"backendCheckBoxes\">
            <label><input type=\"checkbox\" name=\"backend[]\" class=\"common_selector form\" value='{$row['skill_name']}'>&nbsp;{$row['skill_name']}</label>
            </div>";
            }
            echo"<input type=\"button\" class='btn btn-warning btn-sm' id = \"addBackendButton\" value = \"Add\" onclick=\"addSkill('backendCheckBoxes', 'backendDiv', 'backend', 'addBackendButton')\">";
         ?>
         </div>
        </div>

А вот событие addSkill:

function addSkill(checkBoxDivId, divId, nameId, buttonId){
    //Variables
    //Creating new elements for new skills and
    //setting their attributes
    let count = 0;
    console.log(checkBoxDivId);
    let existingSkills = document.querySelectorAll("div[id =" + checkBoxDivId +"]");

    console.log(existingSkills);
    for (let i = 0; i < existingSkills.length; i++){

        count++;
    }
    let uniqueId = count+1;
    console.log(uniqueId);
    let hiddenValue = document.createElement("input");
    hiddenValue.setAttribute("hidden", true);
    hiddenValue.setAttribute("name", "skill_name");

    let checkBoxDiv = document.createElement("div");
    checkBoxDiv.setAttribute("id", checkBoxDivId);
    checkBoxDiv.setAttribute("class", "list-group-item checkbox");
    //console.log(checkBoxDiv);

    let textBoxParent = document.getElementById(divId);
    //console.log(textBoxParent);
    let newTextBox = document.createElement("input");

    newTextBox.setAttribute("type","text");
    newTextBox.setAttribute("id", "newTextBox");

    let newCheckBox = document.createElement("input");


    newCheckBox.setAttribute("name", nameId);
    newCheckBox.setAttribute("class", "common_selector form");
    newCheckBox.setAttribute("type","checkbox");
    newCheckBox.setAttribute("checked", true);
    newCheckBox.setAttribute("value", uniqueId);


    let newLabel = document.createElement("label");
    newLabel.setAttribute("for", "newCheckBox");

    let addButton = document.getElementById(buttonId);
    //console.log(addButton);

    //adding textbox to page
    textBoxParent.appendChild(newTextBox);




    //When an enter key is pressed the newly created textBox
    //will be removed and a new checkbox will appear
    newTextBox.addEventListener("keypress", function(event) {
      // Number 13 is the "Enter" key on the keyboard
          if (event.keyCode === 13) {

            //console.log(newTextBox.value);
            //Canceling the default action, if needed
            event.preventDefault();
            event.stopPropagation();

            //Setting Label value
            newLabel.innerHTML = newTextBox.value;


            let skill_name = newLabel.innerHTML;
            console.log(newCheckBox.getAttribute("value"));

            //posting skill name to database

            hiddenValue.setAttribute("value", newLabel.innerHTML);
            console.log(hiddenValue);
            //Remove textbox from page
            textBoxParent.removeChild(newTextBox);


            //Adding new Checkbox to Div
            checkBoxDiv.appendChild(newCheckBox);
            checkBoxDiv.appendChild(newLabel);
            //checkBoxDiv.appendChild(hiddenValue);

            //Adding new Checkbox Div to page
            addButton.before(checkBoxDiv);

            $.ajax({
                type: 'post',
                data: {skill_name: skill_name},
                success: function(response){
                    alert(skill_name);
                }

            });

          }

    });

}