JQuery 使用子输入字段动态输入字段

Question

stopping my function on javascript
By using this I can add unlimited inputs on my page. But the issue is in my case, I have an input field but it may or may not have a child or sub input field and if then it should be associated with the parent input field.

Also parent input field is must for sub input fields.
Question?
Dynamic input fields(got from above),
Dynamic child/sub input fields,
How to associate child/sub input fields with parent,
So that it can save in the db with related to field.

Answer 1

Use similar function and append under paragraph with different name, Hope this will be helpful. Try it.

Answer 2

http://jsfiddle.net/Shahbaz/WhaBx/

From this I can add multiple input fields and append multiple sub/child input fields. which can be append. I'll try to modify more.

$(function() {
    var scntDiv = $('#p_scents');
    var i = $('#p_scents label').size() + 1;

    $('#addScnt').live('click', function() {
        $('<p>Keyword: '+i+'<a href="#" id="remScnt">Remove</a><br><labelfor="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter Keyword" /><a href="#" id="addVar">Add Variants</a><a></a></label></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('#remScnt').live('click', function() {
      if( i >2 ) {
          $(this).parents('p').remove();
          i--;
       }
       return false;
    });

    $('#addVar').live('click', function() {
    //alert();
    $('<p><label for="var"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Vareyword" /></label> <a href="#" id="remVar">Remove Var</a></p>').appendTo($(this).next());
    return false;
    });


    $('#remVar').live('click', function() {
       $(this).parent('p').remove();
       return false;
    }); 
});

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
    <p>
       Keyword: 1
    <br/>
       <label for="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter keyword">
       <a href="#" id="addVar">Add Variants</a>
       </label>
    </p>
</div>