title: Jquery AJAX id selector and post with change class
body: <p>I have one question. I am trying to make a ajax post with id and also trying to change the class which <code>data-id</code> selected.</p>
  
  <p>I have created this <strong><a href="http://codepen.io/shadowman86/pen/VLQrQZ" rel="nofollow">DEMO</a></strong> from <em>codepen.io</em></p>
  
  <p>In this demo you can see there is a two container div and the container divs inside some different color div. </p>
  
  <p>So what i am trying to do. When i click <code>.change_pri</code> then that clicked (<code>.style, style1, style2</code>) will automatically change <code>.type</code> style like:</p>
  
  <pre><code>&lt;div class="test" id="1"&gt;
    &lt;div class="type style"&gt;selected color&lt;/div&gt; &lt;-- class is style
    &lt;div class="select_types"&gt;
      &lt;div class="type_s"&gt;&lt;div class="change_pri style" data-id="0"&gt;0&lt;/div&gt;&lt;/div&gt;
      &lt;div class="type_s"&gt;&lt;div class="change_pri style1" data-id="1"&gt;1&lt;/div&gt;&lt;/div&gt;
      &lt;div class="type_s"&gt;&lt;div class="change_pri style2" data-id="2"&gt;2&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>after clicking change_pri style2 then it need to looks like this:</p>
  
  <pre><code>&lt;div class="test" id="1"&gt;
    &lt;div class="type style2"&gt;selected color&lt;/div&gt; &lt;-- after clicking class is style2
    &lt;div class="select_types"&gt;
      &lt;div class="type_s"&gt;&lt;div class="change_pri style" data-id="0"&gt;0&lt;/div&gt;&lt;/div&gt;
      &lt;div class="type_s"&gt;&lt;div class="change_pri style1" data-id="1"&gt;1&lt;/div&gt;&lt;/div&gt;
      &lt;div class="type_s"&gt;&lt;div class="change_pri style2" data-id="2"&gt;2&lt;/div&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and post the data-id with ajax. </p>
  
  <p>I do not know how the rest of that section, but I was able to do so. Anyone can help me in this regard ?</p>
  
  <pre><code>$(function() {
    var i;
    i = $(this).attr('id');
  });
  $('.change_pri').on('click', function(e) {
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: "chage_number.php",
      data: {
        id: i,
      },
    });
  
  });
  </code></pre>