Cannot Modify/Manipulate Dynamic Content From Ajax/JSON Response for A Dynamic PHP Form

Question

I need a dynamic form which is supposed to work like this:

1. When user press "ADD" button, appear a new ..<.div> DOM to select a package.
2. Depending on the package, the row must change color (by adding/removing some classes).

But I can't get it working. Here is my HTML:

<button onclick='addDay();'>
<div class='content'>
</div>

My Javascript:

//FUNCTION 1: LOAD AJAX CONTENT
function addDay()
{
    baseUrl = $('input#helper-base-url').val();

    //Set caching to false
    $.ajaxSetup ({
        cache: true
    });

    //Set loading image and input, show loading bar
    var ajaxLoad = "<div class='loading'><img src='"+baseUrl+"assets/images/loading.gif' alt='Loading...'  /></div>";
    var jsonUrl = baseUrl+"car/add_day/"+count;
    $("div#loading").html(ajaxLoad);
    $("div#content").hide();
    $.getJSON(
        jsonUrl,
        {},
        function(json)
        {
                temp = "";

            if(json.success==true)
            {
                temp = json.content;
            }

            //Display the result
            $("div#content").show();
            $("div#content").html($("div#content").html()+temp);
            $("div#loading").hide();
          });
}

//FUNCTION 2: MODIFY AJAX CONTENT
$("#content").on("change", "select.switch", function (e) {

e.preventDefault();

//Get which row is to be changed in background's color
id = this.id;
id = id.substr(6);

//Add class "package1" which change row's background color
row = "row"+id;
row.addClass('package1');

});

My PHP

function add_day($count)
{
    $temp = "<div class='row".$count."'>
        <select id='switch".$count."' class='switch'>
        <option value='1'>Package 1</option>
        <option value='2'>Package 2</option>
        </select>
    </div>";

    $result = array(
        'success' => true,
        'content' => $temp,
        );

    $json = json_encode($result);
    echo $json;
}

PS. The form is not as simple as this but to make the problem solving easier, I remove the details. But I can't seem to change the class on the fly. Do we have a solution or a good work around here?

Edit 1: Sorry I didn't make myself clear before. I had no problem with getting the id or variable (it was okay, when I alert it the right value comes out - but after I add the class, no color changes is seen). I run it:

a. On button click, load Ajax content.

b. Ajax content (which results contains a ) loaded successfully.

c. FAIL: On change, add class "package1" to the div row. (So, I had no problem with getting the right id or class name. When I alert the variables it gives the right result, BUT the color doesn't change. I can't check whether class is successfully added or not.)

Answer 1

$("#content").on("change", "select.switch", function (e) {
    e.preventDefault();

    $('.row' + $(this).attr('id').replace('switch', '')).addClass('package1');
});

Answer 2

Assuming that everything else is ok

//Get which row is to be changed in background's color
id = this.id;
id = id.substr(6);

//Add class "package1" which change row's background color
row = "row"+id;
row.addClass('package1');

This is the problem. To get the attibute id you have to do

var id = $(this).attr('id').substr(6);

You have to use $(this) and not this by the way to use all of jQuery functionalities.

Same below

$(row).addClass('package1');

So, full code:

//Get which row is to be changed in background's color
var id = $(this).attr('id').substr(6);

//Add class "package1" which change row's background color
$('.row'+id).addClass('package1');

Answer 3

Changing the class to id solved the problem (using #row0 instead of .row0). Sorry and thank you for your time :)