Post particular values to particular div with jquery - php

Question

How to make jquery to post values from a particular span to php, and then get values to a particular div? I'd like to have something like this: click span with class "more", that posts value from this li to php, and then via jquery to get value to div with id "test".
Here I have such a code which php gives me. I can add unique "id" for elements if it needs.
<li>
<span class="word">one word</span>
<span class="numb">1</span>
<span class="more">more</span>
<div id="test"></div>
</li>
<li>
<span class="word">another word</span>
<span class="numb">13</span>
<span class="more">more</span>
<div id="test"></div>
</li>
The problem is using this jquery I post only the first span containing class ".word" but instead of it I'd like to post only that spans where the span is. And get the values not to the first div with id "test" again but in the div where the span was clicked. My jquery-code is:
$('.more').live("click",function() {
var ID = $('.word').test();
var DI = $('.numb').text();
$.ajax({
type:"POST",
data: "value="+ ID + "&numb="+ DI,
cache: false,
url: "more.php",
success: function(msg){
$('#test').html(msg).fadeIn('slow');
}
});
});
By adding var ID = $(this).attr("id"); instead of var ID = $('.word').test(); to jquery and to php <span id="<?php echo $word; ?>" class="more">more</span> I can post the unique value of word. But what about the other values? And the main problem is to post to the next div where the span-button "more" is.

Answer 1

var ID = $('.word').test();
replace it with
var ID = $('.word').text();
Also please use .on jQuery function instead of .live as .live is deprecated.
Complete jQuery Code
$(function()
{
$('.more').on("click",function()
{
var clickedDiv = $(this);
var ID = clickedDiv.parent().find('.word').text();
var DI = clickedDiv.parent().find('.numb').text();
$.ajax(
{
type:"POST",
data: "value="+ ID + "&numb="+ DI,
cache: false,
url: "more.php",
success: function(msg)
{
clickedDiv.find('div[custom_id="test"]').html(msg).fadeIn('slow');
}
});
});
});
One more thing do not repeat same ID for DOM.
ID MUST BE UNIQUE.
For that i used <div custom_id = "test"></div>
Updated HTML
<li>
<span class="word">one word</span>
<span class="numb">1</span>
<span class="more">more</span>
<div custom_id = "test"></div>
</li>
<li>
<span class="word">another word</span>
<span class="numb">13</span>
<span class="more">more</span>
<div custom_id = "test"></div>
</li>

Answer 2

this can work out even without the ajax request if you are not doing any thing on the php side .
Check this code :
in the html make the div with class instead of id .
<li>
<span class="word">one word</span>
<span class="numb">1</span>
<span class="more">more</span>
<div class="test"></div>
</li>
<li>
<span class="word">another word</span>
<span class="numb">13</span>
<span class="more">more</span>
<div class="test"></div>
</li>
then
$('.more').click(function (){
var ID = $('.word').text();
var DI = $('.numb').text();
var Data = "value="+ ID + "&numb="+ DI;
$(this).closest('.test').html(Data); // use anyone of them
or
$(this).sibling('.test').html(Data); // use anyone of them
});
this will work perfectly . This is the updated code