Requested JSON parse failed with multiple data

I'm stuck: I'm trying to submit a django form using AJAX, but I can't find a way to send multiple data fields via my AJAX call.

$(document).ready(function() {
        $("#dental").click(function() {
            $.ajax({
                url: " ",
                type: "POST",
                dataType: "json",
                data: {
                    left:leftList,
                    right:rightList,
                    bottom:bottomList,
                    center:centerList,
                    top:topList,
                    csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value
                    },
                success : function(json) {
                    alert("Successfully sent the URL to Django");
                },

                 error: function(jqXHR, exception){
                    var msg = '';
                    if (jqXHR.status === 0) {
                        msg = 'Not connect.\n Verify Network.';
                    } else if (jqXHR.status == 404) {
                        msg = 'Requested page not found. [404]';
                    } else if (jqXHR.status == 500) {
                        msg = 'Internal Server Error [500].';
                    } else if (exception === 'parsererror') {
                        msg = 'Requested JSON parse failed.';
                    } else if (exception === 'timeout') {
                        msg = 'Time out error.';
                    } else if (exception === 'abort') {
                        msg = 'Ajax request aborted.';
                    } else {
                        msg = 'Uncaught Error.\n' + jqXHR.responseText;

                    }
                    $('#messages').html(msg);
                    console.log(msg);
                },
            });
        });
    });

It only shows Requested JSON parse failed. The individual values of leftList, rightList, bottomList, centerList is good when I tried to show it individually.

What's the correct syntax to call multiple data in my AJAX call?

I formatted my data using this

**UPDATE 1:**These are my sample variable value list:

var topList = ["C11"]
   var rightList = ["L12", "L11"]
   var bottomList = ["R14", "R13", "R12", "R11"]
   var leftList = ["B13", "B12", "B11"]
   var centerList = ["T15", "T14", "T13", "T12", "T11"]

UPDATE 2:Below is how I call my HTML with django:

<tr>
   {% with '48 47 46 45 44 43 42 41 31 32 33 34 35 36 37 38' as list_lower %}
   {% for y in list_lower.split %}
   <td>
      <svg width="50" height="50" >
         <ellipse onClick="centerArea(this.id)" id="centerArea_C{{ y }}"  name="centerArea_{{ y }}"   class="ngipon" />
         <path onClick="leftArea(this.id)" id="leftArea_L{{ y }}"  name="leftArea_{{ y }}" class="ngipon/>
         <path onClick="topArea(this.id)" id="topArea_T{{ y }}" name="topArea_{{ y }}" class="ngipon"/>
         <path onClick="bottomArea(this.id)" id="bottomArea_B{{ y }}" name="bottomArea_{{ y }}" class="ngipon"/>
         <path onClick="rightArea(this.id)" id="rightArea_R{{ y }}" name="rightArea_{{ y }}" class="ngipon" />
      </svg>
   </td>
   {% endfor %}
</tr>
<tr>

When an object of my svg is clicked, a js function that correspond to its position is called. Below is an example when toArea is clicked. The idea is the same to other area when pressed.

function topArea(object) {
    var ngipon4 = object.slice(8, 11);
    console.log(ngipon4);
    var property = document.getElementById(object);
    if (property.style.fill == orange) {
        property.style.fill = filled;
        counter+=1;
        for (i = 0; i < counter; i++) {
            topList.push(ngipon4);  //add items in centerList
        }
        //remove duplicate item in array
        topList = topList.filter( function( item, index, inputArray ) { return inputArray.indexOf(item) == index; });
    }
    else property.style.fill = orange;
}

When I checked my google web inspector, parsing error is displayed.