search box besides an input element

[jimfog]

take a look at this fiddle https://jsfiddle.net/fiddlehunt/Lnt74wje/18/ 

Select the doctor radio button to see what happens...an input box appears in a place I do not want.

 

I want it to appear right besides the radio button/text...as shown in  the image snapshot below

I thouht that enclosing the image input/label on a span tag(which is inline element) would the trick...but it does not.

Furthermore the label is set to display block by the css code...it is this which creates the problem in the first place.

Any ideas...

 

[niche]

Try changing the label display to inline and put a line break after each input option. 
 

EDIT 

I’m pretty sure display:block for the input label is the problem. 

Edited January 25, 2021 by niche

[jimfog]

thanks...there is one last detail.

when the user clicks the doc radio and then some other radio the search box stays there(unwanted)...AND

subsequent clicks of the doctor radio(after clicking othe radio buttons) displays many   search boxes in the DOM-besides the doctor radio button.

 

How to tackle these two.

I have thought some solutions but I want to hear your opinion.

[dsonesuk]

On change you remove any existing input elements of that id ref,  before inserting the new input after radio button radio selection.

[jimfog]

7 hours ago, dsonesuk said:

On change you remove any existing input elements of that id ref,  before inserting the new input after radio button radio selection.

Ι do not get it....do you mean something like this https://jsfiddle.net/fiddlehunt/Lnt74wje/45/

The results are not the desired...

[dsonesuk]

No silly, you dont use the textual html as selector, you use the id of that newly created input

    $('.basics #med').remove();

Use a existing parent as guide to element, as the newly added element did not exist on page load.

You might to make it hide completely if other radio button are checked, then make it show only when #medical is selected.

[jimfog]

16 minutes ago, dsonesuk said:

No silly, you dont use the textual html as selector, you use the id of that newly created input

You are absolutely right....do not know what I was thinking...

This is better now https://jsfiddle.net/fiddlehunt/Lnt74wje/62/

Still I must do it  like this-your sugestion is better:

17 minutes ago, dsonesuk said:

You might to make it hide completely if other radio button are checked, then make it show only when #medical is selected.

 

[dsonesuk]

$('.basics :radio').on('click' ,function(){
 
 $('.basics #med').remove();

 
 });

remove the previous code, add this separately on its own on click function as this does exactly the same for all radio buttons.

https://jsfiddle.net/0no1zbyh/

Edited January 27, 2021 by dsonesuk