After click append child with input field like tree

Question

I am trying to create organization structure with left child and right child. just like this demo http://www.jqueryscript.net/demo/Create-An-Editable-Organization-Chart-with-jQuery-orgChart-Plugin/

But I want to save data from here with input field. I want to create left child and right child for each after click. now all displaying one after one in bottom and only remove button. I want add button also for creating child for each input form. Here I used like this

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

  $('#addScnt').live('click', function() {
    $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
    i++;
    return false;
  });

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

* {
  font-family: Arial;
}
h2 {
  padding: 0 0 5px 5px;
}
h2 a {
  color: #224f99;
}
a {
  color: #999;
  text-decoration: none;
}
a:hover {
  color: #802727;
}
p {
  padding: 0 0 5px 0;
}
input {
  padding: 5px;
  border: 1px solid #999;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -web-kit-border-radius: 4px;
  -khtml-border-radius: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
  <p>
    <label for="p_scnts">
      <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
    </label>
  </p>
</div>

Here is jsfiddle DEMO I want to create tree structure same as that plugin with input form. but failed to do that. my snippet is not working in question so I placed jsfiddle link.

Answer 1

There are various errors in your code mainly the id's should be unique. And use on() instead of live() since it's depreciated in new versions. You can do something like this with use of table , it's a simple demo you need to update it

// bind click event handler
$("#main").on('click', '.add', function() {
  //getting parent td
  var $td = $(this).parent();
  // creating child element
  var $td1 = $('<td>', {
    html: '<input  />      <button class="add">+</button>      <button class="remove">-</button>'
  });
  // getting child table if there is
  var $tbl = $td.children('table')
    // checking child exist or not , if yes then append child to it
  if ($tbl.length)
    $tbl.find('tr').eq(0).append($td1);
  // else create new table and update
  else
    $td.append($('<table>', {
      html: $('<tr>', {
        html: $td1
      })
    }))
    // bind remove handler
}).on('click', '.remove', function() {
  // remove the parent td
  $(this).parent().remove();
});

input {
  width: 20px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="main" style="width:100%;text-align:center">
  <tr>
    <td>
      <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
      <button class="add">
        +
      </button>
      <button class="remove">
        -
      </button>
    </td>
  </tr>
</table>

Answer 2

This may do the job but I admit there is some bugs, But I think it still worthy to look .. I made it with the help of Bootstrap Grid System.

HTML

<div class="container-fluid">
  <div class="row">
    <div class="parent-col col-md-12">
      <input type="text" />
      <BR />
      <a class='sibling'>Add Sibling</a>
      or
      <a class='child'>Add Child</a>
    </div>
  </div>
</div>

JS

$('.child').click(function(){
    var r = $(this).closest('div.row').clone(true, true);
  r.find('.parent-col').not(':eq(0)').remove();
  var c = $(this).closest('.parent-col');
  var n = c.append( r );
});

$('.sibling').click(function(){

  var thisC = $(this).closest('.parent-col');
  var n = thisC.clone(true, true);
  thisC.after(n);
    var c = $(this).closest('div.row');
    var len = $('div.parent-col', c).length;
  var newClass = Math.ceil(12/len);
  c.find('.parent-col').attr('class', 'parent-col col-md-'+newClass);

});

jsFiddle

Test it in full width view to easily notice the tree structure.