Auto add checkbox values and keep their name for storing in database

I have checkboxes retrieved from my database with respective item_name and value which happen to be displayed correctly, but here is my issue, the values are being added/subtracted automatically when selected/checked, however, i want to save the selected check box item_names and also the total sum of the values from the checkboxes. I can't accomplish this because the value option holds numeric data which should have been the checkbox item_name; here is so far what i have.

    <script type="text/javascript">
    function checkTotal() {
        document.listForm.total.value = '';
        var sum = 0;
        for (i=0;i<document.listForm.sel_car.length;i++) {
          if (document.listForm.sel_car[i].checked) {
            sum = sum + parseInt(document.listForm.sel_ca[i].value);
          }
        }
        document.listForm.total.value = sum;
    }
</script>

HTML/PHP Snippet

    <h4>Available Cars | Click on desired car(Multiple Selections enabled) | Total Price: <input type="text" size="2" name="total" value="0"/></h4>
        <div class="form-group">

        <?php

    $stmt = $DB_con->prepare('SELECT * FROM cars ORDER BY car_id DESC');
    $stmt->execute();

    if($stmt->rowCount() > 0)
    {
        while($row=$stmt->fetch(PDO::FETCH_ASSOC))
        {
            extract($row);
            ?>  
        <div class="col-md-3"><label class="btn btn-primary">
            <img src="user_images/<?php echo $row['userPic']; ?>" alt="..." class="img-thumbnail img-check"><input type="checkbox" name="sel_car[]" id="item4" value="<?php echo $row['car_price']; ?>" class="hidden" autocomplete="off"  onchange="checkTotal()"/>
            <h5><?php echo $row['se_car_model']; ?> | UGX <?php echo $row['car_price']; ?>/=</h5>
            </label></div>

<?php
        }
    }
?>

Hope i get some help, kindly don't down vote my question, don't want to be banned