dynamic value inheritance of a child input (unordered list)

Question

Hello, I need some idea of how to create a dynamic heritage of parent input values for children and grandchildren. Once the user enters the value in an input automatically it needs to be changed in the child items. based on an input attribute called "inherit" that receives the id of the input from which it will inherit the value.

The scheme I created is not right, it updates everyone.

 
$('input:text').change(function(){
   var id = $(this).attr('id');
   if (($(this).parent().find('input:text').attr('herdar')) == id) {
       $(this).parent().find('input:text').val(id);
   }
});

<div id="teste1">
    <ul>
        <li><input type="checkbox" value="00" checked="true"><input type="text" >teste
        
             <ul>
                 <li> <input type="checkbox" value="01"><input type="text" >item pai
                    <ul>
                        <li><input type="checkbox" value="01"><input type="text" >item filho</li>
                        <li><input type="checkbox" value="01"><input type="text" >item filho</li>  
                   </ul>
                </li>
               <li><input type="checkbox" value="04"><input type="text" >item irmão</li>
           </ul>
        </li>
    </ul>
</div>

Could someone help me?

I did it with Jquery, but if anyone has a simpler and better idea it’s okay.

Answer 1

See if this is what you wanted:

Write something on the first input.

$('input:text').keyup(function(){
	var id= $(this).attr('id');
  $('input[data-herdar="' + id + '"]').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste1">
  <ul>
    <li>
      <input type="checkbox" value="00" checked="true">
      <input type="text" id="pai" >teste
      <ul>
        <li>
          <input type="checkbox" value="01">
          <input type="text">item pai
          <ul>
            <li>
              <input type="checkbox" value="01">
              <input type="text">item filho</li>
            <li>
              <input type="checkbox" value="01">
              <input type="text" data-herdar="pai" ><b><em>Este input herdará do primeiro</em>   </b></li> 
          </ul>
        </li>
        <li>
          <input type="checkbox" value="04">
          <input type="text">item irmão</li>
      </ul>
    </li>
  </ul>
</div>

As in the example above, you define the id of the element that will be inherited, and in the element that will inherit the attribute will be added data-herdar, who will receive this id of the inherited element. Ready, the script does the rest.

Note: whenever you want to work with the manipulation of new taxes, in general, the prefix is used data-, so there are no conflicts, besides being a specification "universal".

Answer 2

Just add in the if the condition to ignore the element itself being changed.

PS: You were running the same selector 3 times, this has an unnecessary cost pro browser, I saved the result of this selector within a variable to search only once, thus improves performance.

$('input:text').change(function(){
   var id = $(this).attr('id');

   var filho = $(this).parent().find('input:text');

   if (filho.attr('herdar') == id && filho.prop('id') != id) {
       filho.val(id);
   }
});